1、安装

npm install echarts --save

在main.js中全局引入

  1. import * as echarts from 'echarts'
  2. Vue.prototype.$echarts = echarts

2、快速上手

引入折线图

  1. <div id="echarts-assessment" style="width: 600px;height:400px;"></div>
  3. mounted(){
  4.   this.getAssessment()
  5. }
  6. methods:{
  7.     getAssessment(){
  8.     let myChart = this.$echarts.init(document.getElementById('echarts-assessment'));
  9.     let option = {
  10.         xAxis: {
  11.             type: 'category',
  12.             data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  13.         },
  14.         yAxis: {
  15.             type: 'value'
  16.         },
  17.         series: [{
  18.             //data可以是对象形式 [{name:"学业压力", value:"150"}]
  19.             data: [150, 230, 224, 218, 135, 147, 260],
  20.             type: 'line'
  21.         }]
  22.     };
  23.     option && myChart.setOption(option);
  24.   }
  25. }

更换其他图形只需要更换实例中的option代码即可
官网实例：https://echarts.apache.org/next/examples/zh/index.html

3、遇见问题汇总

3.1数据更新后视图未更新

解决方案：
将setOption的第二个参数设置为true

myChart.setOption(‘配置项’,true);

【setOption中3个参数的含义】
option—— 图表的配置项和数据
notMerge—— 可选，是否不跟之前设置的 option 进行合并，默认为 false，即合并。
lazyUpdate—— 可选，在设置完 option 后是否不立即更新图表，默认为 false，即立即更新。

3.2柱状图，正数显示在柱上方，负数则显示在柱下方

解决方案：使用map遍历data，要分清楚data是数组还是数组对象

  1. xArr.map((item, idx) => {
  2.   newData.push({
  3.     name: item,
  4.     type: 'bar',
  5.     barWidth: 11,
  6.     barGap: '130%',
  7.     label: {                //此处被每一个data覆盖
  8.       show: true,
  9.       position: "top",
  10.       fontSize: 11,
  11.       color: '#000',
  12.       formatter: function(value) {
  13.         return parseFloat(value.value.toFixed(3))
  14.       }
  15.     },
  16.     data: data[idx].map(item=>{
  17.       return {
  18.         name:item.name,
  19.         value:item.value,
  20.         label: {
  21.           show: true, //开启显示
  22.           position: item.value > 0 ? "top" : "bottom", //判断正负值上方显示还是下方
  23.         }
  24.       }
  25.     }),
  26.     itemStyle: {
  27.       color: this.abnormalColor[idx],
  28.     }
  29.   })
  30. })