echarts 通用线性图
getLineData() {
const myChart = echarts.init(this.$refs.chartDom);
const option = {
tooltip: {
trigger: 'axis',
},
legend: {
show: false,
textStyle: {
fontSize: 14,
color: '#ffffff',
},
data: ['AAA', 'BBB'],
},
grid: {
show: true,
left: '10%',
top: '15%',
right: '10%',
bottom: '13%',
},
xAxis: {
data: ['项目1', '项目2', '项目3', '项目4', '项目5', '项目6'],
axisLabel: {
textStyle: {
color: '#ffffff',
},
},
axisLine: {
show: true,
lineStyle: {
color: '#335B7E',
},
},
},
yAxis: [
{
type: 'value',
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#335B7E',
},
},
axisLabel: {
textStyle: {
color: '#ffffff',
},
},
axisLine: {
show: true,
lineStyle: {
color: '#335B7E',
},
},
},
{
type: 'value',
splitLine: {
show: false,
},
axisLabel: {
formatter: '{value} %',
textStyle: {
color: '#ffffff',
},
},
axisLine: {
show: true,
lineStyle: {
color: '#335B7E',
},
},
},
],
series: [
{
name: 'AAA',
type: 'line',
smooth: true,
itemStyle: {
normal: {
color: '#39BFFA',
},
},
data: [20, 12, 20, 34, 90, 30],
},
{
name: 'BBB',
type: 'line',
smooth: true,
itemStyle: {
normal: {
color: '#23CEA8',
},
},
data: [10, 52, 200, 334, 390, 330],
},
],
};
myChart.setOption(option);
window.addEventListener('resize', function () {
myChart.resize();
});
},