vue-echarts中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所需的组件，网上有没有相关教程，全局引入echarts又会造成浪费。

解决方案

---

在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)