visualmap折线图_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)