Echarts 效果图
image.png
Echarts 绘制折线图
闲话不多说,直接到观众老爷们最喜欢的上代码环节
js代码
data = [
['category', '单个任务体积'],
['2019-08-26', 811.123],
['2019-08-27', 628.103],
['2019-08-28', 422.714],
['2019-08-29', 512.275],
['2019-08-30', 623.74],
['2019-08-31', 712],
['2019-09-01', 521.456],
['2019-09-02', 612.338],
];
var option = {
dataset: {
source: data,
},
lineStyle: {
color: '#00ffff',
},
title: {
text: '单个任务体积=当前总体积数/当前总任务数量',
left: 'right', //设置标题对其方式为左对齐
textStyle: {
// fontSize:14
},
},
tooltip: {
trigger: 'axis',
formatter: function (params) {
params = params[0];
//当鼠标移动显示每个item
return params.value[0] + ' : ' + params.value[1];
},
axisPointer: {
animation: false,
},
},
grid: {
bottom: '15%',
},
xAxis: {
type: 'time',
splitLine: {
show: false,
},
},
yAxis: {
name: '单位(千方)',
type: 'value',
boundaryGap: [0, '100%'],
min: 0,
max: 1000,
interval: 100,
splitLine: {
show: false,
},
},
series: [
{
name: '模拟数据',
type: 'line',
showSymbol: false,
hoverAnimation: false,
},
],
};
