参考博客的地址:https://blog.youkuaiyun.com/sleepwalker_1992/article/details/82709793
步骤: 标题 , 图示,对x和y轴的设置(名字,间隔,两个y轴或x轴,长度等),接下来是数据(数据显示的类型,line,bar以及对应的data)
这些都是最基本的图形元素,更复杂的可以参考官网上面实例学习.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>统计</title>
<script src="echarts.min.js"></script>
<script src="ecStat.min.js"></script>
</head>
<body>
<div id="main" style="width: 1000px;height:650px;margin:0 auto"></div>
<script type="text/javascript">
var data1 = [1753, 834, 510, 301, 301, 133, 133, 133, 133, 133];
var data2= [120, 102, 89, 73, 73, 59, 59, 59, 59, 59];
var data3= [6.845, 12.230, 17.451, 24.252, 24.252, 44.361, 44.361, 44.361, 44.361, 44.361];
var data = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0];
option = {
title: {
text: '个数标记总值-重要值-准确率统计',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#283b56'
}
}
},
legend: {
data:['标记总值', '重要值','准确率']
},
xAxis: {
type: 'category',
splitLine: {
lineStyle: {
type: 'dashed'
}
},
data: data
},
yAxis: [{
type: 'value',
name: '准确率'
},
{
type: 'value',
scale: true,
name: '数值'
}],
series: [{
name: '标记总值',
type: 'bar',
yAxisIndex: 1,
label: {
emphasis: {
show: true,
position: 'left',
textStyle: {
color: 'blue',
fontSize: 16
}
}
},
data: data1
},{
name: '重要值',
type: 'bar',
yAxisIndex: 1,
label: {
emphasis: {
show: true,
position: 'left',
textStyle: {
color: 'blue',
fontSize: 16
}
}
},
data: data2
},{
name: '准确率',
type: 'line',
data: data3
}]
};
echarts.init(document.getElementById('main')).setOption(option);
</script>
</body>
</html>