vueecharts中visiualMap不起作用如何设置echarts根据值显示不同的颜色

背景

---

最近基于 vue.js 开发的 web 页面时需要用折线图来展示数据，当时第一反应是使用 echarts，后来在网上搜索相关示例时看到不少说使用 vue-echarts 的，就了解了一下。

需求

---

产品提出想要异常值在折线图上显示的颜色不同于正常值，使得数据展示更加清晰直观。通过查看 echarts 官方文档
发现可以使用 visiualMap 来配置图表根据值的范围显示特定的颜色，在 Echarts Demo 上示例如下：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {type: 'value'},
    series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }],visualMap: [{
          'show': false,
          'pieces': [{
            'gte':1000,
            'lt': 1500,
            'color': 'blue'
          }, {
            'lt': 1000,
            'gt': 0,
            'color': 'red'
          }]
        }]
};

对应的折线图：

问题

---

但是在项目中设置 visualMap 并不起作用，经过仔细核查后发现为了节省资源在项目中只引入了 ’echarts/lib/chart/line’，没有引入配置 visualMap 的 js 文件。

解决方案

---

在 main.js 中引入 visualMap 相应的 js 文件，具体如下：

import ECharts from 'vue-echarts/components/ECharts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/visualMap'   // 引入 visualMap 相对应的 js 文件

Vue.component('chart', ECharts)