echarts折线图背景颜色自定义，实心圆点，虚线网格等功能

需求：根据传入的值对背景进行分层颜色展示，比如y轴20-40区间颜色为蓝色，40-50为红色这种，折线图的小圆点设置为实现，实现缩放功能

1.效果如下

2.代码讲解如下

首先下载echarts

npm install echarts@4.9.0 -S

我这边吓得是4.9版本，高版本会出现一个问题，那就是如果写了背景的话，y轴线的刻度会显示不出来，只有线没有刻度了，所以我这边用的还是以前的版本。

其中onZero：X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效，如果你的值中有负数，直接把这个关了，不然效果如下，刻度线跑0度上面去了

axisLine: {show: true, //是否显示轴线onZero: false, lineStyle: {color: '#333'}}

legend：就是最上面可以点的部分，这个data的值要和series的name值一致，不然写了不显示

  legend: {data: ['红色', '蓝色', '绿色']},

tooltip：做了个防止抖动，transitionDuration最好都加上这个，如果图例翻转的话不加一直就会一直抖动，效果也不好

 tooltip: {trigger: 'axis',transitionDuration: 0 // 让toolltip紧跟鼠标，防止抖动},

背景区间色：markArea中yAxis是纵轴的范围，这边是0-200设置是蓝色

   markArea: {data: [[{yAxis: '0', //开始itemStyle: {//  看这里，加了这个属性color: '#87c6fe',//   borderWidth: 1,//   borderType: "dashed",opacity: 0.8}},{yAxis: '200',//结束}],//  如果有多种颜色，就继续在这里写区间数组，复制上面的下来改颜色]}

3.完整代码如下

<template><div class="content-box"><div class="container"><div id="echartsData"></div></div></div>
</template><script>
import * as echarts from 'echarts';
export default {data() {return {};},mounted() {this.lineEcharts();},methods: {lineEcharts() {const option = {xAxis: {name: '',// type: "",position: 'bottom',offset: 0,axisLabel: {color: '#0000000',fontSize: 10},data: ['5-20', '5-21', '5-22', '5-23', '5-24', '5-25', '5-26', '5-27'],splitLine: {show: true,lineStyle: {color: '#59924d',type: 'solid',width: 0.8}},zlevel: 9,axisTick: {show: true,inside: false},axisLine: {show: true,onZero: false,lineStyle: {color: '#333'}}},// 内置区域缩放dataZoom: [{xAxisIndex: [0],type: 'inside',filterMode: 'none'},{yAxisIndex: [0],type: 'inside',filterMode: 'none'}],tooltip: {trigger: 'axis',transitionDuration: 0 // 让toolltip紧跟鼠标，防止抖动},legend: {data: ['红色','蓝色','绿色']},yAxis: [{name: '',type: 'value',show: true,axisLabel: {boundaryGap: false,color: '#000000',fontSize: 10,interval: 0},splitLine: {show: true,lineStyle: {color: '#59924d',type: 'dashed',width: 0.8}},zlevel: 9,axisTick: {show: true},axisLine: {show: true,onZero: false,lineStyle: {color: '#333'}}}],grid: {top: '10%',left: '10%',right: '5%',bottom: '15%'},series: [{name: '红色',data: [150, 230, 224, 218, 135, 147, 260],type: 'line',symbol: 'circle', //将小圆点改成实心 不写symbol默认空心symbolSize: 5, //小圆点的大小markArea: {data: [[{yAxis: '0', //开始itemStyle: {//  看这里，加了这个属性color: '#87c6fe',//   borderWidth: 1,//   borderType: "dashed",opacity: 0.8}},{yAxis: '200'}],[{yAxis: '200', //结束itemStyle: {//  看这里，加了这个属性color: '#ece6b2',//   borderWidth: 1,//   borderType: "solid",opacity: 0.5}},{yAxis: '250'}],[{yAxis: '250',itemStyle: {//  看这里，加了这个属性color: '#ffbf9c',opacity: 0.6}},{yAxis: '300'}]//  如果有多种颜色，就继续在这里写区间数组，复制上面的下来改颜色]}},{name: '蓝色',data: [58, 42, 152, 110, 135, 120, 280],type: 'line',symbol: 'circle', //将小圆点改成实心 不写symbol默认空心symbolSize: 5 //小圆点的大小},{name: '绿色',data: [48, 75, 52, 240, 11, 70, 33],type: 'line',symbol: 'circle', //将小圆点改成实心 不写symbol默认空心symbolSize: 5 //小圆点的大小}]};const myChart = echarts.init(document.getElementById('echartsData'));myChart.setOption(option);//随着屏幕大小调节图表window.addEventListener('resize', () => {myChart.resize();});}}
};
</script><style lang="scss" scoped>
#echartsData {height: 500px;width: 100%;
}
</style>

文章到此结束，希望对你有所帮助~

echarts折线图背景颜色自定义，实心圆点，虚线网格等功能相关推荐

echarts折线图填充颜色
Echarts折线图填充颜色 let chart = echarts.init(document.getElementById('main'));chart.setOption({title: {te ...
echarts折线图背景线_echarts设置折线线条颜色和折线点颜色的实例
本文主要介绍了jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法,结合实例形式分析了jQuery图表插件echarts设置折线图的相关操作技巧,需要的朋友可以参考下,希望能帮助到 ...
echarts折线图背景线_echarts-设置折线图中折线线条颜色和折线点颜色
1.问题背景设计一条折线图,但是图形中不用插件自带的颜色,需要自定义线条和折点的颜色 2.实现源码 (1)图形自分配颜色 echarts-设置折线图中折线线条颜色和折线点颜色 body,html{ ...
echarts 折线图阴影颜色渐变
series下面的这个areaStyle series: [{data: count,type: "line",smooth: true, areaStyle: {normal: ...
echarts折线图颜色-折线图颜色设置-线条设置
原图: 需要实现的效果: 开始修改 1.首先去掉x轴以及y轴刻度线及坐标线,留下刻度值需要设置xAxis和yAxis里的axisLine 以及axisTick xAxis xAxis: {//设置 ...
Python使用matplotlib函数subplot可视化多个不同颜色的折线图、自定义数据点的形状、自定义折线图的颜色
Python使用matplotlib函数subplot可视化多个不同颜色的折线图.自定义数据点的形状.自定义折线图的颜色目录
echarts折线图设置圆点_echarts 设置折线图单个数据小圆圈样式
在使用echarts 折线图时,可能会遇到针对不同的数据显示不同的小圆点样式,经过查看echarts配置项,其中data中有一个value配置项选项,可以单独设置某一个数据的显示样式,具体使用方式如下 ...
echarts折线图分段显示颜色
echarts折线图分段显示颜色 - vue技术交流群(864583465) 1.直接上代码 option = {xAxis: {type: 'category',data: ['Mon', 'Tue ...
Echarts折线图曲线图和三维图
1 折线图鼠标放在点上时显示的数据效果,在代码中用到的就是 tooltip这个参数,其中 show的默认值是 true,可以省略,当我们不想显示悬浮提示效果,将show修改为 false. trig ...

echarts折线图背景颜色自定义，实心圆点，虚线网格等功能

1.效果如下

2.代码讲解如下

3.完整代码如下

echarts折线图背景颜色自定义，实心圆点，虚线网格等功能相关推荐

最新文章

热门文章