echarts折线图填充颜色

Echarts折线图填充颜色

let chart = echarts.init(document.getElementById('main'));chart.setOption({title: {text: '地市集团数据',subtext: '纯属虚构'},tooltip: {trigger: 'axis'},xAxis: [{type: 'category',boundaryGap: false,data: ['西宁', '海东', '海北', '黄南', '海南', '果洛', '玉树']}],yAxis: [{type: 'value',"splitLine": {"show": false}}],series: [{name: '清乐集团',type: 'line',smooth: true,itemStyle: { normal: { areaStyle: { type: 'default' }, color: '#f488f2' } },data: [10, 12, 21, 54, 260, 830, 710]},{name: '盐湖工业',type: 'line',smooth: true,itemStyle: { normal: { areaStyle: { type: 'default' }, color: '#fcf367' } },data: [30, 182, 434, 791, 390, 30, 10]},{name: '投资公司',type: 'line',smooth: true,itemStyle: { normal: { areaStyle: { type: 'default' }, color: '#0bebf9' } },data: [880, 760, 601, 234, 120, 90, 20]},]});

echarts折线图填充颜色相关推荐

echarts折线图背景颜色自定义，实心圆点，虚线网格等功能
需求:根据传入的值对背景进行分层颜色展示,比如y轴20-40区间颜色为蓝色,40-50为红色这种,折线图的小圆点设置为实现,实现缩放功能 1.效果如下 2.代码讲解如下首先下载echarts npm ...
echarts 折线图阴影颜色渐变
series下面的这个areaStyle series: [{data: count,type: "line",smooth: true, areaStyle: {normal: ...
Echarts实现折线图+柱状图+折线图填充
用Echarts练习实现折线图+柱状图+折线图填充,以便后续使用时可直接复制 option = {title: {text: '动态数据',subtext: '纯属虚构'},tooltip: {tri ...
echarts折线图分段显示颜色
echarts折线图分段显示颜色 - vue技术交流群(864583465) 1.直接上代码 option = {xAxis: {type: 'category',data: ['Mon', 'Tue ...
echarts折线图颜色-折线图颜色设置-线条设置
原图: 需要实现的效果: 开始修改 1.首先去掉x轴以及y轴刻度线及坐标线,留下刻度值需要设置xAxis和yAxis里的axisLine 以及axisTick xAxis xAxis: {//设置 ...
echarts折线图折现下方显示阴影
echarts折线图折现下方显示阴影实现echarts折现下方显示渐变阴影区域代码: series: [{name: this.chartPropList[this.dataResource]. ...
Echarts折线图区域填充问题解决
前言我们用Echarts做折线图时,有时我们需要在两条折线图之间有颜色填充效果,如果折线的数值范围涉及到负数,颜色只会填充到Y轴0刻度之上,而且上折线不能有负数,效果如下图: 我的调整思路: 将两条 ...
echarts折线图相关
optionJKDLine = { title: {text: '告警数量趋势图',textStyle:{ //标题样式fontStyle:'normal',fontFamily:'sans-seri ...
Echarts折线图的平移假动画
Echarts折线图的平移假动画 #可视化项目中经常用图表的方式来展示数据,折线图是经常出现的,但是在echarts折线图中正常情况是通过删除数据的第一个,添加一个新数据在数组的末尾来实现动画,此动画 ...

echarts折线图填充颜色

Echarts折线图填充颜色

echarts折线图填充颜色相关推荐

最新文章

热门文章