使用echarts制作统计图

html

<div id="main" style="width: 100%;height:400px;"></div>',monospace;font-size:9.0pt;">

引入第三方资源

<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js" ></script>',monospace;font-size:9.0pt;">

js代码',monospace;font-size:9.0pt;">

<script type="text/javascript">
const myChart = echarts.init(document.getElementById('main'));
const date = <?php echo json_encode($date); ?>;
const count = <?php echo json_encode($count); ?>;

const axisData = date;
const data = count;
const links = data.map(function (item, i) {
return {
source: i,
target: i + 1
};
});
links.pop();
option = {
title: {
text: '接口每天调用统计'
},
tooltip: {},
xAxis: {
type: 'category',
boundaryGap: false,
data: axisData
},
yAxis: {
type: 'value'
},
series: [
{
type: 'graph',
layout: 'none',
coordinateSystem: 'cartesian2d',
symbolSize: 50,
label: {
show: true
},
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 40],
data: data,
links: links,
lineStyle: {
color: '#2f4554'
}
}
]
};

myChart.setOption(option);
</script>',monospace;">',monospace;font-size:9.0pt;">
',monospace;font-size:9.0pt;">

效果

阅读量！ (601)