draw(legendList, name1, name2, data1, data2) {
var that = this;
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(0, 255, 233,0)',
},
{
offset: 0.5,
color: 'rgba(255, 255, 255,1)',
},
{
offset: 1,
color: 'rgba(0, 255, 233,0)',
},
],
global: false,
},
},
},
fontSize: '12px',
backgroundColor: 'rgba(7,16,47,.6)', //设置背景图片 rgba格式
color: 'black',
borderWidth: '0', //边框宽度设置1
borderColor: 'transparent', //设置边框颜色
textStyle: {
color: '#fff', //设置文字颜色
},
extraCssText: 'box-shadow: 0px 0px 20px inset #09E5ED',
formatter: function (params, ticket, callback) {
// console.log(params)
const item = params[0];
const item1 = params[1];
var string = '<div style="margin-left:5px">' + item.name.replace('-', '年').replace('-', '月') + '日' + '</div>';
string += `<div style="display:flex;align-items: center;margin-top:5px;margin-left:5px"><div style="width:8px;height:8px;background:rgba(2,191,108,1);"></div><span style= "padding:0 10px">${item.name.slice(
0,
4
)}</span> <span style = "padding:0 20px">${item.value} 台</span> </div>`;
if(item1 != undefined){
string += `<div style="display:flex;align-items: center;margin-top:2px;margin-left:5px;"><div style="width:8px;height:8px;background:#F7B500;"></div><span style= "padding:0 10px">${item1.name.slice(
0,
4
)}</span> <span style = "padding:0 20px">${item1.value} 台</span> </div>`;
}
return string;
},
},
legend: {
bottom: 5,
itemWidth: 8,
itemHeight: 8,
textStyle: {
fontSize: 12,
color: '#FFFFFF',
},
icon: 'rect',
},
grid: {
top: '15%',
left: '1%',
right: '5%',
bottom: '18%',
containLabel: true,
},
xAxis: [
{
type: 'category',
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitArea: {
// show: true,
color: '#f00',
lineStyle: {
color: '#f00',
},
},
axisLabel: {
color: '#fff',
},
splitLine: {
show: false,
},
boundaryGap: false,
// data: ['A', 'B', 'C', 'D', 'E', 'F'],
data: legendList,
},
],
yAxis: [
{
type: 'value',
min: 0,
// max: 140,
splitNumber: 4,
splitLine: {
show: false,
lineStyle: {
color: 'rgba(255,255,255,0.1)',
},
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
margin: 20,
textStyle: {
color: '#fff',
},
},
axisTick: {
show: false,
},
},
],
series: [
{
// name: '2021',
name: name1,
type: 'line',
smooth: true, //是否平滑
showSymbol: false,
symbol: 'circle',
symbolSize: 1,
lineStyle: {
normal: {
// color: "#00b3f4",
// shadowColor: 'rgba(0, 0, 0, .3)',
// shadowBlur: 0,
// shadowOffsetY: 5,
// shadowOffsetX: 5,
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: '#fff',
},
},
itemStyle: {
color: 'rgb(2,191,108)',
// borderColor: "#fff",
borderWidth: 3,
shadowColor: 'rgba(0, 0, 0, .3)',
shadowBlur: 0,
shadowOffsetY: 2,
shadowOffsetX: 2,
},
tooltip: {
show: true,
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(0,245,123,1)',
},
{
offset: 1,
color: 'rgba(0,245,123,0)',
},
],
false
),
shadowColor: 'rgba(0,245,123,1)',
shadowBlur: 20,
},
},
// data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02, 100,200,200,300]
data: data1,
},
{
name: name2,
// name: '2020',
type: 'line',
smooth: true, //是否平滑
showSymbol: false,
symbol: 'circle',
symbolSize: 1,
lineStyle: {
normal: {
// color: "#00ca95",
// shadowColor: 'rgba(0, 0, 0, .3)',
// shadowBlur: 0,
// shadowOffsetY: 5,
// shadowOffsetX: 5,
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: '#00ca95',
},
},
itemStyle: {
color: '#F7B500 ',
// borderColor: "#fff",
borderWidth: 3,
shadowColor: 'rgba(0, 0, 0, .3)',
shadowBlur: 0,
shadowOffsetY: 2,
shadowOffsetX: 2,
},
tooltip: {
show: true,
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(247,181,0,1)',
},
{
offset: 1,
color: 'rgba(247,181,0,0)',
},
],
false
),
shadowColor: 'rgba(247,181,0, 1)',
shadowBlur: 20,
},
},
// data: [281.55, 398.35, 214.02, 179.55, 289.57, 356.14, 502.84, 205.97, 332.79, 281.55,],
data: data2,
},
],
};
window.addEventListener('resize', () => {
this.myChart.resize();
});
this.myChart.setOption(option);
}