当前位置:首页 > 编程笔记 > 正文
已解决

Vue echarts 折线图 背景颜色渐变 (两种实现方式)

来自网友在路上 176876提问 提问时间:2023-10-26 16:45:25阅读次数: 76

最佳答案 问答题库768位专家为你答疑解惑

需求

在这里插入图片描述

实现方式

两种方法

方法一:color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{},{},{}])
方法二避开new echarts,color: {x: 0, y: 0, x2: 0, y2: 1,colorStops: [{},{},{}]}

option = {xAxis: {type: 'time',data: ['10/28', '10/29', '10/30', '10/31', '11/01', '11/02']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'line',areaStyle: {  // 使用方法二的写法color: {type: 'linear',x: 0,  //右y: 0,  //下x2: 0,  //左y2: 1,  //上colorStops: [{offset: 0,color: '#A05920' // 0% 处的颜色},{         offset: 1,color: '#C7982A' // 100% 处的颜色}]}},emphasis: { // 选中时的颜色itemStyle: { // 使用方法一的写法color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#A05920' },{ offset: 1, color: '#C7982A' }])}}}]
};

tips:

如果new echarts.graphic.LinearGradient报错,不能正常显示
可使用:new this.$echarts.graphic

  color: [new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#A05920' },{ offset: 1, color: '#C7982A' }]),new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 1, color: "#08DDF280" },{ offset: 0, color: "#3D9CF580" },]),], //自定义颜色
查看全文

99%的人还看了

猜你感兴趣

版权申明

本文"Vue echarts 折线图 背景颜色渐变 (两种实现方式)":http://eshow365.cn/6-25247-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!