用Echarts出现的问题整理

最近在写后台管理系统,需要用到图表,本来对图表就不是很了解,所以遇到很多很多基础问题,分享给大家,如果有相同问题可以更快的解决~

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[创建阶段-挂载阶段-更新阶段-销毁阶段]

用Echarts出现的问题整理

最近在写后台管理系统,需要用到图表,本来对图表就不是很了解,所以遇到很多很多基础问题,分享给大家,如果有相同问题可以更快的解决~

恭喜!echarts基本使用就完成了~

猜你喜欢