option = {
grid: {
top: "4%",
left: '8',
right: '-4%',
bottom: "14%" //也可设置left和right设置距离来控制图表的大小
},
tooltip: {
trigger: 'axis'
},
xAxis: {
data: xaxis.data || [],
axisLine: {
show: false, //隐藏X轴轴线
},
axisTick: {
show: false //隐藏X轴刻度
},
axisLabel: {
show: true,
textStyle: {
color: "#9FA0A4" //X轴文字颜色
}
},
},
yAxis: [{
type: "value",
offset: -34,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
textStyle: {
color: "#9FA0A4"
},
formatter: function (value, index) {
if (value >= 10000 && value < 10000000) {
value = value / 10000 + "万";
} else if (value >= 10000000) {
value = value / 10000000 + "千万";
}
return value;
}
},
}],
series: [{
name: "商城访问量",
type: "line",
yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
symbol: "circle", //标记的图形为实心圆
symbolSize: 8, //标记的大小
itemStyle: {
//折线拐点标志的样式
color: "#0F92F6",
},
lineStyle: {
color: "#0F92F6"
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 1,
color: "rgba(11,206,251,.3)"
},
{
offset: 0,
color: "rgba(15,140,245,.2)"
}
])
}
},
data: series[0].data || []
}]
}
return option;
}
function getOption(percentage) {
var option = {
title: {
text: percentage + '%',
subtext: '新客比',
x: 'center',
y: 'center',
itemGap: 4,
textStyle: {
color: '#7793FE',
fontSize: '15'
},
subtextStyle: {
color: '#465367',
fontSize: 14
}
},
color: 'rgba(255,255,255,.3)',
series: [{
type: 'pie',
markLine: {
lineStyle: {
curveness: 0
}
},
clockWise: true,
radius: ['86%', '100%'],
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
}
},
hoverAnimation: false,
data: [{
value: percentage,
itemStyle: {
normal: {
color: { // 完成的圆环的颜色
colorStops: [{
offset: 0,
color: '#0F8CF5' // 0% 处的颜色
}, {
offset: 1,
color: '#0BCEFB' // 100% 处的颜色
}]
},
label: {
show: false
},
labelLine: {
show: false
}
}
}
}, {
value: 100 - parseFloat(percentage),
itemStyle: {
color: '#DFE4E8'
}
}]
}]
}
}
如果我想使用echarts中的echarts.graphic渐变要怎么处理
1.0.3 版本已经支持，https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx1db9e5ab1149ea03&token=2099838319&lang=zh_CN：
const { echarts } = requirePlugin('echarts'); { ... color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ { offset: 1, color: 'rgba(11,206,251,.3)', }, { offset: 0, color: 'rgba(15,140,245,.2)', }, ]) ... }