vue项目中 echarts的渐变色的设置
实现效果2 设置渐变色areaStyle: {normal: {color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(63,...
·
实现效果
2 设置渐变色
areaStyle: {
normal: {
color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(63,227,236,0.8)'
}, {
offset: .4,
color: 'rgba(63,227,236,0.3)'
}, {
offset: 1,
color: 'rgba(63,227,236,0.00)'
}])
}
3 在echarts --> series --> areaStyle --> normal --> color设置
series: [
{
name: '审方数',
type: 'line',
smooth: true,
symbolSize: 1, // 拐点图形大小
areaStyle: {
normal: {
color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(63,227,236,0.8)'
}, {
offset: .4,
color: 'rgba(63,227,236,0.3)'
}, {
offset: 1,
color: 'rgba(63,227,236,0.00)'
}])
// ['rgba(63,227,236,0.3)'],
}
},
itemStyle: {
color: ['#3FE3EC'],
},
data: [10, 20, 15, 20, 15, 20, 15, 20, 15, 20, 15, 20],
icon:'image://http://file.dyzhkj.cn/null/1562315548784PyZcsO处方数.png'
},]
4 完整代码
ButtomDrawLine() {
let t = this;
let myChart = this.$echarts.init(document.getElementById('ButtomDrawLine'))
myChart.setOption({
title: {},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
left: 'right',
textStyle: {//图例文字的样式
color: '#ffffff',
fontSize: 14
},
show: true,
data: [
{
name: '审方数',
},
{
name: '处方数',
},
{
name: '会员数'
},
{
name: '含麻登记',
}
]
},
/*toolbox: {
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
},
iconStyle:{
normal:{
color:'white',//设置颜色
}
}
},*/
xAxis: [
{
type: 'category',
axisLine: { // x轴的颜色和宽度
lineStyle: {
color: '#3594FF',
}
},
axisLabel: {
show: true,
textStyle: {
color: '#fff'
},
},
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
}
],
yAxis: [
{
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#fff'
},
},
axisLine: {
lineStyle: {
color: '#3594FF',
}
},
// 控制网格线是否显示
splitLine: {
show: false
},
min: 0,
splitNumber: 5,
boundaryGap: [0.2, 0.2],
data:[0,50,100,150],
}
],
grid: {
top: '25%',
left: '0',
right: '0',
bottom: '0',
containLabel: true
},
series: [
{
name: '审方数',
type: 'line',
smooth: true,
symbolSize: 1, // 拐点图形大小
areaStyle: {
normal: {
color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(63,227,236,0.8)'
}, {
offset: .4,
color: 'rgba(63,227,236,0.3)'
}, {
offset: 1,
color: 'rgba(63,227,236,0.00)'
}])
// ['rgba(63,227,236,0.3)'],
}
},
itemStyle: {
color: ['#3FE3EC'],
},
data: [10, 20, 15, 20, 15, 20, 15, 20, 15, 20, 15, 20],
icon:'image://http://file.dyzhkj.cn/null/1562315548784PyZcsO处方数.png'
},
{
name: '处方数',
type: 'line',
smooth: true,
symbolSize: 1, // 拐点图形大小
areaStyle: {
color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(82,206,86,0.8)'
}, {
offset: .4,
color: 'rgba(82,206,86,0.3)'
}, {
offset: 1,
color: 'rgba(82,206,86,0.00)'
}])
// ['rgba(82,206,86,0.3)'],
},
itemStyle: {
normal: {
color: ['#52CE56'],
}
},
data: [10, 5, 15, 5, 15, 20, 15, 20, 15, 5, 15, 10]
},
{
name: '会员数',
type: 'line',
smooth: true,
symbolSize: 1, // 拐点图形大小
areaStyle: {
color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(251,98,100,0.8)'
}, {
offset: .4,
color: 'rgba(251,98,100,0.3)'
}, {
offset: 1,
color: 'rgba(251,98,100,0.00)'
}])
// ['rgba(251,98,100,0.3)'],
},
itemStyle: {
normal: {
color: ['#FB6264'],
}
},
data: [35, 45, 65, 25, 65, 44, 15, 40, 35, 46, 50, 25]
},
{
name: '含麻登记',
type: 'bar',
itemStyle: {
normal: {
color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(231,233,65,0.8)'
}, {
offset: .4,
color: 'rgba(231,233,65,0.3)'
}, {
offset: 1,
color: 'rgba(231,233,65,0.00)'
}]),
// ['rgba(231,233,65,0.5)'],
barBorderColor: '#E7E941', // 柱条边线
barBorderRadius: 0, // 柱条边线圆角,单位px,默认为0
barBorderWidth: 1, // 柱条边线线宽,单位px,默认为1
}
},
barWidth: 15,//柱图宽度
data: [5, 7, 3, 7, 5, 4, 5, 6, 4, 7, 5, 8]
}
]
})
},
Tips:【小程序云开发】中高级前端面试题库(源码:小程序中联系我哟)。
---------- 创作不易,感谢大家,请多多支持!
更多推荐
已为社区贡献16条内容
所有评论(0)