vue eacharts折线图实线加虚线实线区域渐变色添加虚线

<div id="myChart"></div>this.drawLine();drawLine() {// 基于准备好的dom，初始化echarts实例let myChart = this.$echarts.init(document.getElementById('myChart'))// 绘制图表myChart.setOption({//用formatter回调函数显示多项数据内容  tooltip: {trigger: 'axis',formatter: function(params, ticket, callback) {var htmlStr = '';var valMap = {};for (var i = 0; i < params.length; i++) {var param = params[i];var xName = param.name; //x轴的名称  var seriesName = param.seriesName; //图例名称  var value = param.value; //y轴值  var color = param.color; //图例颜色  //过滤无效值if (value == '-') {continue;}//过滤重叠值if (valMap[seriesName] == value) {continue;}// if (i === 0) {//     htmlStr += xName + '<br/>'; //x轴的名称  // }htmlStr += '<div>';//为了保证和原来的效果一样，这里自己实现了一个点的效果  htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>';//圆点后面显示的文本  htmlStr += seriesName + '：' + value;htmlStr += '</div>';valMap[seriesName] = value;}return htmlStr;}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'category',boundaryGap: false,axisLine: {lineStyle: {type: 'solid',color: 'rgba(30,30,30,0.3)', //左边线的颜色}},axisLabel: {show: true,color: 'rgba(30,30,30,0.67)',},axisTick: {show: false},              data: [{ value: '一月' }, { value: '二月' }, { value: '三月' }, { value: '四月' }, { value: '五月' }, {value: '当前',textStyle: {color: '#ff1010'}}, { value: '下月' }]},yAxis: [{type: 'value',axisLabel: {formatter: '{value}',textStyle: {color: 'rgba(30,30,30,0.3)'}},axisLine: {lineStyle: {type: 'solid',color: 'rgba(30,30,30,0.3)', //左边线的颜色}},lineStyle: {type: 'solid',color: 'rgba(30,30,30,0.3)',},axisLine: {show: false},axisTick: {show: false},}],series: [{name: '品鉴值',type: 'line',data: [500, 1200, 800, 1800, 1900, 1900, "-"],symbol: 'none',smooth: false,itemStyle: {normal: {color: '#ff7575',},},lineStyle: {color: '#ff7575'},areaStyle: {normal: {color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0.6,color: 'rgba(255,201,201,1)' // 0% 处的颜色}, {offset: 1,color: 'rgba(255,248,201,0.5)' // 100% 处的颜色}]),},},markPoint: {symbol: 'rect',symbolSize: [35, 20],symbolOffset: [0, -25],itemStyle: {color: '#ff5b82'},data: [{coord: [5, 1900],value: 1900,}]},markLine: {symbol: 'none', //去掉箭头lineStyle: {color: 'rgba(175,175,175,0.3)'},data: [[{ coord: ['当前', 0] },{ coord: ['当前', 1900] }]]},},{name: '品鉴值',type: 'line',symbolSize: 8,smooth: false, //关键点，为true是不支持虚线，实线就用trueitemStyle: {normal: {color: '#ff5b82',borderWidth: 4,lineStyle: {width: 2,type: 'dotted', //'dotted'虚线 'solid'实线,color: '#ff5b82'}}},emphasis: { // 鼠标经过时：itemStyle: {borderType: 'solid'}},data: [{ value: "-" },{ value: "-" },{ value: "-" },{ value: "-" },{ value: "-" },{ value: 1900 },{value: 2000,label: {show: true}}]}]});}

结束语：

希望这篇文章能帮助到大家。

喜欢的加个关注，点个收藏，给个赞~ 大家一起成长

vue eacharts折线图实线加虚线实线区域渐变色添加虚线相关推荐

Vue绘制折线图并渲染数据
本文讲解vue项目中使用ECharts快速绘制折线图,并将服务器传来的数据渲染上去,提供源代码,可以直接复制粘贴使用. 效果展示: Vue 通常使用ECharts 生成图表,官网地址: Apache ...
vue echarts 折线图多Y轴显示，加动态配置Y轴颜色
1.效果图 2.引入依赖 npm install echarts --save 3.在mian.js中引入 import * as echarts from 'echarts'; Vue.protot ...
echart自定义动画_ECharts使用—折线图动态加载
最近需求中用到折线图,单线条,多线交错,之前是散点图,用的是另一个 amcharts.js,这个文档也能找的到,回归早本次重点:ECharts 一.首先引入echarts.common.min.js文 ...
echarts折线图背景颜色自定义，实心圆点，虚线网格等功能
需求:根据传入的值对背景进行分层颜色展示,比如y轴20-40区间颜色为蓝色,40-50为红色这种,折线图的小圆点设置为实现,实现缩放功能 1.效果如下 2.代码讲解如下首先下载echarts npm ...
echarts+vue——散点图+折线图——技能提升
最近在写后台管理系统时,遇到一个需求,就是散点图+折线图做一个图表,由于之前没有接触过散点图,因此下面记录一下: 在echarts官网上可以看到散点图需要注意的内容如下: 因此组装数据是非常关键的. ...
android定义一条虚线,android自定义TextView添加虚线(虚线下划线)
目前相关文字下方添加虚线的文章非常少,备选方案有: 1 文字下方添加一个drawable实现虚线样式 2 通过spannable方案自定义 3 通过textview的getpaint实现 4 实现自定 ...
html语言怎么在虚线中加字,html – 用CSS添加虚线spacer / infill
我正在一家餐馆网站上工作.该设计要求在菜单项和价格之间填充典型的虚线.我一直在网上搜索并乱了一个小时左右,现在似乎没有找到任何好方法只用CSS做到这一点.如果你有一个纯色背景,我在这里发现了其他几个解 ...
echarts实现实线与虚线相连接的折线图
** 一:UI效果图 ** ** 二:后台返回的数据格式 ** [{measureTime:'2021-5-1',value:36,level:1},{measureTime:'2021-5-2',v ...
Java通过JfreeChart生成转Base64图片字符串（饼图、折线图、柱状图、折线图-多条、3D柱状图、气泡图、时序图、曲线图、区域图、分布图、联合分类图、双X轴图、K线图、柱状图-横向等图)
工具类 CreatLineChart.java package DrawLine;import java.awt.BasicStroke; import java.awt.Color; import ...

vue eacharts折线图实线加虚线实线区域渐变色添加虚线

vue eacharts折线图实线加虚线实线区域渐变色添加虚线相关推荐

最新文章

热门文章

vue eacharts折线图 实线加虚线 实线区域渐变色 添加虚线

vue eacharts折线图 实线加虚线 实线区域渐变色 添加虚线相关推荐

最新文章

热门文章

vue eacharts折线图实线加虚线实线区域渐变色添加虚线

vue eacharts折线图实线加虚线实线区域渐变色添加虚线相关推荐