import { useEffect, useState } from 'react';
import * as echarts from 'echarts';
/**
* by Shiwu
*/
export default function DoubleLine() {
useEffect(() => {
const container = document.getElementById('DoubleLineContainer');
console.log('DoubleLineContainer', container)
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(container);
let option = {
title: {
text: '资产总览',
top: 10,
left: 10
},
tooltip: {
trigger: 'axis',
axisPointer: { // 鼠标移动覆盖 显示横坐标虚线
type: 'cross'
},
formatter: "{a}
{b} : {c}次"
},
// toolbox: {
// show: true,
// top: 10,
// right: 10,
// feature: {
// mark: { show: true },
// magicType: { show: true, type: ['line', 'bar'] },
// restore: { show: true },
// saveAsImage: { show: true }
// }
// },
grid: {
top: 60,
right: 70,
bottom: 30,
left: 60
},
legend: {
top: 0,
left: 'center',
data: ['资产数', '存储量']
},
calculable: true,
xAxis: [
{
type: 'category',
splitLine: { show: false },
axisTick: { show: false },
data: ['201901', '201902', '201903', '201904', '201905', '201906', '201907', '201908', '201909', '201910', '201911', '201912']
}
],
yAxis: [
{
type: 'value',
splitLine: { show: false },
// name:"管\n线\n查\n询\n次\n数\n︵\n次\n︶",
// nameLocation:"center",
// nameGap:35,
// nameRotate:0,
// nameTextStyle:{
// fontSize: 16,
// },
//默认以千分位显示,不想用的可以在这加一段
axisLabel: { //调整左侧Y轴刻度, 直接按对应数据显示
show: true,
showMinLabel: true,
showMaxLabel: true,
formatter: function (value) {
return value;
}
},
},
{
type: 'value',
splitLine: { show: false },
// name:"在\n线\n调\n用\n次\n数\n︵\n次\n︶",
// nameLocation:"center",
// nameGap:35,
// nameRotate:0,
// nameTextStyle:{
// fontSize: 16,
// },
//默认以千分位显示,不想用的可以在这加一段
axisLabel: { //调整左侧Y轴刻度, 直接按对应数据显示
show: true,
showMinLabel: true,
showMaxLabel: true,
formatter: function (value) {
return value;
}
}
}
],
series: [
{
name: '资产数',
type: 'line',
smooth: true,
yAxisIndex: 0,
data: [35, 15, 8, 12, 11, 6, 3, 0, 0, 0, 0, 0],
itemStyle: { normal: { label: { show: true } } },
},
{
name: '存储量',
type: 'line',
smooth: true,
yAxisIndex: 1,
data: [0.1, 0.1, 0.1, 0.1, 0.7, 0.7, 0.7, 0.7, 0.3, 0.3, 0.3, 0.3],
itemStyle: { normal: { label: { show: true } } },
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}, []);
return (
<div id="DoubleLineContainer" style={{ width: '100%', height: 400 }}></div>
);
}