echarts 折线分段显示不同颜色
来源:互联网 发布:万能试验机软件 编辑:程序博客网 时间:2024/05/17 08:14
根据数据,折线在不同区域显示不同颜色 当大于10时显示绿色,小于10时显示红色 代码在echarts官例上改动
option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' } } }, legend: { data:['蒸发量','降水量','平均温度'] }, xAxis: [ { type: 'category', data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'], } ], yAxis: [ { type: 'value', }, { type: 'value', } ], visualMap: { show: false, type: 'piecewise', seriesIndex:2,//控制series 对应的区域 pieces: [{ gt: 10, color: 'green' }, { gt: 0, lte: 10, color: 'red' }] }, series: [ { name:'蒸发量', type:'bar', /// visualMap:false, 无效 data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3] }, { name:'降水量', type:'bar', //visualMap:false,无效 data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3] }, { name:'平均温度', type:'line', yAxisIndex: 1, data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2] } ]};上面代码显示如下 使用visualMap 属性 默认的是全部区域变色 下图我只是改变折线颜色所以使用seriesIndex:2(对应series属性)
根据需求 需要改变X Y 轴方向 但是折线颜色显示错误 如下图
需要在visualMap 里面添加dimension 属性 代码如下
另一个根据阶段显示不同颜色
https://segmentfault.com/a/1190000005648860
阅读全文
0 0
- echarts 折线分段显示不同颜色
- echarts折线图分段显示不同颜色
- echarts折线图分段用不同颜色显示
- highcharts分段显示不同颜色
- Echarts折线图不同X轴的对比功能,不同段不同颜色显示
- WPF 文本分段,不同颜色显示
- TextView分段显示不同颜色,字体
- echarts柱状图不同颜色与显示数值
- ECharts实现折线图颜色分段及markline标注
- 使用echarts实现动态显示折线图
- android中TextView分段显示不同颜色,字体,时间
- android中TextView分段显示不同颜色,字体,时间
- android中TextView分段显示不同颜色,字体,时间
- android中TextView分段显示不同颜色,字体,时间
- android中TextView分段显示不同颜色,字体,时间
- android中TextView分段显示不同颜色,字体,时间
- android中TextView分段显示不同颜色,字体,时间
- hightchart 改变点的颜色,分段显示不同颜色
- 2274: [Usaco2011 Feb]Generic Cow Protests
- 电脑上访问一个网页,整个过程是怎么样的:DNS、HTTP、TCP、OSPF、IP、ARP。
- xymon详细安装教程
- java内部类
- mybatis自动生成代码generator
- echarts 折线分段显示不同颜色
- Google 出品的 Protocol Buffer,别只会用 JSON 和 XML 了
- smali
- 安全渗透测试笔记-----------开写封面
- ubuntu下ccv库配置及DPM等算法demo
- JavaScript中的变量就是变量,不会随着=右边的改变而改变
- Servlet笔记——(1.3.1)第一个手动Servlet程序
- Java中三种交换值得方式
- systemProperty的使用