最近在写后台管理系统,需要用到图表,本来对图表就不是很了解,所以遇到很多很多基础问题,分享给大家,如果有相同问题可以更快的解决~
1 用npm下载Echarts,出现这种问题(用的vue-cli vue2)
解决: 1.1 删除package-lock.json文件 1.2 npm install
2 注意:因为最新版的echarts和vue2有冲突,所以可以选用版本不是最新的下载,下载echarts的时候要添加版本号
比如 npm install [email protected] --save
3 引入echarts的时候可以全引入 ,也可按需引入
全局引入的话在main.js中
//引入echarts
import * as echarts from 'echarts'
//挂载到vue原型上
Vue.prototype.$echarts=echarts
但是全局引入的话太大了-会额外的引入其他无用的配置文件,造成应用文件体积过大,资源加 载耗时过长,影响用户体验,简单来说就是文件大 加载慢
按需引入的话
我写的是 import * as echarts from 'echarts/core' 报错了!
正确写法:
//引入vue实例
import Vue from 'vue'
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件,看需求引不同的组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
//挂载到vue原型对象上
Vue.prototype.$echarts = echarts
注意:我是在vue组件中写的,如果多个页面需要用就可以在main.js中写
4创建自己的图表了
1 echarts需要一个容器来装图表的,我们要给他一个盒子
<template>
<div id="linebox" ref="linebox"></div>
</template>
<style>
#linebox{
height: 400px;
width: 600px;
}
</style>
2 创建图表-按照需求配置
methods:{
myecharts(){
// 初始化echarts实例-这两种都可
// let mychart=echarts.init(this.$refs.linebox)
let mychart=echarts.init(document.querySelector('#linebox'))
//设置配置项
let option={
title:{}//标题组件
tooltip:{},//提示框组件
yAxis:[],//y轴
xAxis:[],//x轴
legend:{},//图例组件
grid:{},//内绘网格
toolbox:{},//工具
series:[],//数据有关
calculable:true//可计算特性
}
//防止越界,重绘canvas--这个要加上,防止浏览器屏幕发生改变,导致echarts图表变化
window.onresize = mychart.resize;
//将配置挂到echarts实例上
mychart.setOption(option);
}
},
mounted(){
this.myecharts()//挂载的时候,调用方法
}
3 echarts初始化应在钩子函数mounted()中
一开始在created钩子函数中直接调用,会报这个错,获取不到dom节点,vue生命周期在挂载阶段才能获取到dom[创建阶段-挂载阶段-更新阶段-销毁阶段]