Echarts图实现折线图根据自定义标准线,超过标准值是一种颜色低于标准值是一种颜色

通过echarts图中的visualMap组件可以将数据分成若干个区间,每个区间都可以设置不同的颜色,然后结合series中的markLine设置标准线从而实现标准线上下折线呈现出两种颜色的效果

// 初始化echartsmyEcharts() {this.myChart = echarts.init(document.getElementById('main'))var option = {xAxis: {type: 'category',data: this.echartsX,axisLine: { onZero: true },splitLine: {show: false,// lineStyle: {//     color: '#0c223c',// }},axisTick: {//隐藏刻度线show: false,},},yAxis: [{type: 'value',// 动态设置y轴的最大值// 如果数据的最大值大于标准值则以数据的最大值为准// 如果数据的最大值小于标准值则以标准值为准max: (value) => {if (value.max * 1 > this.first_card_data.standardValue * 1) {return Math.ceil(value.max * 1)} else {return Math.ceil(this.first_card_data.standardValue * 1)}},},],series: [{name: this.first_card_data.dataName,data: this.echartsY,type: 'line',smooth: true,showSymbol: false,markLine: {symbol: 'none',animation: false,       // 是否开启动画label: {show: false},data: [{// silent: false,yAxis: this.first_card_data.standardValue * 1,label: {show: true,padding: [-13, -20, 15, -90], // 标签位置上右下左position: 'end',        // 标签的位置formatter: '标准值：' + this.first_card_data.standardValue,color: '#101391',fontSize: 14,},lineStyle: { type: 'solid', color: '#101391', width: 3 } // 样式： 线型、颜色、线宽}]},},],tooltip: {show: true,trigger: 'axis'},visualMap: [{type: 'piecewise',show: false,dimension: 1,seriesIndex: 0,pieces: [{min: this.first_card_data.standardValue * 1 + 0.001, // 没有设置最大值，表明当前范围 [min, Infinity] 变色color: this.first_card_data.colorIdentify[0].color ? this.first_card_data.colorIdentify[0].color : '#909399'},{max: this.first_card_data.standardValue * 1, // 没有设置最小值，表明当前范围 [-Infinity, max] 变色color: this.first_card_data.colorIdentify[1].color ? this.first_card_data.colorIdentify[1].color : '#909399'},],}],grid: {left: '5%',right: '3%',containLabel: true},}this.myChart.setOption(option)},

Echarts图实现折线图根据自定义标准线,超过标准值是一种颜色低于标准值是一种颜色相关推荐

【Echart多场景示例应用】Echarts柱状图、折线图、饼图、雷达图等完整示例。 echarts主标题和副标题的位置、样式等设置（已解决附源码）
**[写在前面]**前端时间做一个echarts的页面调整,临时客户要求加一个参数(总容量)显示,当时我就想用个默认的副标题吧,哪知客户和我说得紧跟在主标题后面,于是乎我就根据设置做了一个调整,我也是 ...
[VUE2/VUE3]基于echarts的动态折线图组件
[VUE2/VUE3]基于echarts的动态折线图组件时间格式化代码 export default function formatSecond(value: number) {let millis ...
echarts type:line 折线图折线折点样式
echarts type:line 折线图折线折点样式 series: [{name: '课时',type: 'line',data: [23,60,20,36,23,85],label:{ //折 ...
直播app源代码，echarts 柱状图，折线图互转实例
直播app源代码,echarts 柱状图,折线图互转实例的相关代码 function initDayChart(){var myChart = echarts.init(document.getEle ...
在 Echarts 中设置折线图x轴文字的倾斜度
在 Echarts 中设置折线图x轴文字的倾斜度在工作需求中,有需要把 Echarts 折线图的文字变成倾斜的样式.类似这样的: 这个功能咋实现? 很简单.加一句话就行了 // 配置项 option ...
Echarts实现折线图+柱状图+折线图填充
用Echarts练习实现折线图+柱状图+折线图填充,以便后续使用时可直接复制 option = {title: {text: '动态数据',subtext: '纯属虚构'},tooltip: {tri ...
Echarts 快速入门折线图
基础折线图简单折线图如果我们想建立一个横坐标是类目型(category).纵坐标是数值型(value)的折线图,我们可以使用这样的方式: option = {xAxis: {type: " ...
php 生成饼状图，折线图，条形图通用类
生成饼状图,折线图,条形图通用的php类,这里使用的是百度 Echart. Echart 官方网站 http://echarts.baidu.com/ <?php class Echarts ...
android-柱状图、折线图、x轴、y轴绘制以及实例代码
首先上图: 看图说话,不错吧!!哈哈给地址:项目的github地址给自己打广告:^_^ 欢迎关注我的github! 该项目不是我的独创,我在原有作者的基础上,把代码进行了注释.添加了上面三幅图中的 ...
visualmap折线图_echarts折线图实现切断效果
需求描述: 折线图如果相邻的两个值都是0则不显示这一段水平折线. 分析如果折线图上的数值为0会在,x轴有一段水平线,如果能将这段隐藏就达到了折线图切割的效果. echarts中有个折线图渲染属性 v ...

Echarts图实现折线图根据自定义标准线,超过标准值是一种颜色低于标准值是一种颜色

Echarts图实现折线图根据自定义标准线,超过标准值是一种颜色低于标准值是一种颜色相关推荐

最新文章

热门文章