在练习echarts之前至少要知道它是什么:
Apache ECharts ———— 一个基于 JavaScript 的开源可视化图表库
【1】获取echarts.js文件 :在https://www.jsdelivr.com/package/npm/echarts 选择 dist/echarts.js
,点击并保存为 echarts.js
文件。
【2】引入echarts.js文件:<script src="js/echarts.js"></script>
(引入echarts.js文件时一定一定一定【重要的事情说三遍】要注意路径,如果路径写的不对,将不起作用【我初次练习时就犯了这个错误】)
【3】建议和我一样零基础的小白,在初次练习时,仔细学习资源中术语速查手册中的内容。相信我,当你熟悉手册中的内容后,就不会再主观认为echarts难了。另外echarts官网中有很多示例,都可以直接拿来进行练习,写代码真的不能偷懒,还是得多敲才行。
直接上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>柱状图</title>
<script src="js/echarts.js"></script>
<style type="text/css">
*{
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
.zzt {
width: 900px;
background-color: rgb(253, 238, 238);
margin: 100px auto;
}
.title {
font-size: 16px;
font-weight: 600;
height:42px;
line-height:42px;
color:#4B4B4B;
border-radius:2px 2px 0 0;
padding:0 20px;
}
#barchart {
height: 260px;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<!--柱状图-->
<div class="zzt">
<div class="title">
图表数据
</div>
<div id="barchart"></div>
</div>
</div>
</body>
<script type="text/javascript">
var chartDom = document.getElementById('barchart');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: '电路开通情况',
left: "center",
textStyle: {
fontSize:'16',
fontWeight: 'bold',
color: '#1D1D1D', //标题的具体颜色
}
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['二层电路', '三层电路'],
left: "7%",
top: "10%",
itemWidth: 14, //小图标的宽度
itemHeight: 8, //小图标的高度
itemGap: 16,
textStyle: {
fontSize:'12',
fontWeight: '400',
color: '#4B4B4B', //字体颜色
}
},
toolbox: {
show: true,
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
},
},
calculable: true,
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisLine: {
lineStyle: {
type: 'solid',
color: '#CCCCCC',//左边线的颜色
width:'1'//坐标线的宽度
}
},
axisTick: {
show: false, //去掉x轴的刻度线
},
axisLabel: {
textStyle: {
fontSize:'12',
color: '#4B4B4B',//坐标值的具体颜色
}
}
}
],
yAxis: [
{
type: 'value',
min: 60,
max: 210,
interval: 30,
splitLine: {
show: true, //y轴网格线
lineStyle: {
type:'dotted', //点状
color: '#CCCCCC',
opacity: '0.31', //透明度
}
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#CCCCCC', //上边线的颜色
width:'1'//坐标线的宽度
}
},
axisLabel: {
textStyle: {
fontSize:'12',
color: '#4B4B4B', //坐标值的具体颜色
}
}
}
],
series: [
{
name: '二层电路',
type: 'bar',
barWidth:9, //柱状图的宽度
color: '#E80000', //柱状图的颜色
data: [85.0, 129.0, 129.0, 154.0, 128.0, 127.0, 187.0, 181.0, 128.0, 100.0, 129.0, 79.0],
markPoint: {
data: [
{name: '年最高', value: 187.0, xAxis: 6, yAxis: 187},
{name: '年最低', value: 79.0, xAxis: 11, yAxis: 79}
],
symbolSize: 35, //表示最大最小值标记的大小
},
markLine: {
data: [
{type: 'average', name: '平均值'}
],
symbol: ['none', 'triangle'], //表示平均值的线的左右两头的形状
symbolSize: 7,
lineStyle: {
type:'dotted', //点状线
}
},
},
{
name: '三层电路',
type: 'bar',
barWidth:9, //柱状图的宽度
color: '#4B4B4B', //柱状图的颜色
data: [67.0, 119.0, 167.0, 154.0, 119.0, 119.0, 155.0, 142.0, 119.0, 100.0, 119.0, 75.0],
markPoint: {
data: [
{name: '年最高', value: 167.0, xAxis: 2, yAxis: 167},
{name: '年最低', value: 67.0, xAxis: 0, yAxis: 67}
],
symbolSize: 35, //表示最大最小值标记的大小
},
markLine: {
data: [
{type: 'average', name: '平均值'}
],
symbol: ['none', 'triangle'], //表示平均值的线的左右两头的形状
symbolSize: 7,
lineStyle: {
type:'dotted', //点状线
}
}
}
]
};
option && myChart.setOption(option); //一定一定不可以漏掉
</script>
</html>
请看效果图 :
更多详情见echarts官网:https://echarts.apache.org/zh/index.html