Echarts实现渐变式折线图
2019-11-12 本文已影响0人
nomooo
ps: 因为用的比较多了，就不留注释了，不明白自行查询Echarts文档
实现效果
实现代码
HTML部分
<div class="chart_line" ref="chartsLine"></div>
JS部分
public mounted() {
this.drawChartLine();
}
public drawChartLine() {
const chart = echarts.init(this.$refs.chartsLine as HTMLCanvasElement);
const option: any = {
backgroundColor: '#fff',
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#57617B',
},
},
},
legend: {
icon: 'rect',
itemWidth: 14,
itemHeight: 5,
itemGap: 13,
data: ['维度1', '维度2'],
right: '4%',
textStyle: {
fontSize: 12,
color: '#000',
},
},
grid: {
left: '3%',
right: '3%',
bottom: '3%',
top: '10%',
containLabel: true,
},
xAxis: [
{
type: 'category',
boundaryGap: false,
axisTick: {
show: false,
},
axisLabel: {
margin: 5,
textStyle: {
fontSize: 14,
color: '#000',
},
},
axisLine: {
lineStyle: {
color: '#ddd',
},
},
splitLine: {
show: true,
lineStyle: {
type: 'solid',
color: '#ddd',
},
},
data: ['测试1', '测试2', '测试3', '测试4', '测试5'],
},
],
yAxis: [
{
type: 'value',
name: 'y轴单位',
nameTextStyle: {
color: '#000',
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: '#ddd',
},
},
axisLabel: {
margin: 5,
textStyle: {
fontSize: 14,
color: '#000',
},
},
splitLine: {
lineStyle: {
type: 'solid',
color: '#ddd',
},
},
},
],
series: [
{
name: '维度1',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 3,
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgb(1, 103, 255)',
},
{
offset: 1,
color: 'rgb(1, 103, 255, 0.1)',
},
],
false
),
},
},
itemStyle: {
normal: {
color: 'rgb(1, 103, 255)',
},
},
data: [32, 34, 39, 35, 38],
},
{
name: '维度2',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 3,
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgb(255, 5, 192)',
},
{
offset: 1,
color: 'rgb(255, 5, 192, 0.1)',
},
],
false
),
},
},
itemStyle: {
normal: {
color: 'rgb(255, 5, 192)',
},
},
data: [25, 22, 26, 28, 27],
},
],
};
chart.setOption(option);
}
