1.下载echart.js
注意:这里介绍的是纯原生js使用echarts,如果使用的是vue环境,请移步我的另一篇文章:vue-cli中使用echarts
这是官方的下载地址
https://echarts.apache.org/zh/download.html
2.在html引用
<script type="text/javascript" src="Echarts.js"></script>
3.准备图表容器
<div id="chartmain" style="width:600px; height: 400px;"></div>
4.设置参数,初始化图表
<script type="text/javascript">
//指定图标的配置和数据
var option = {
title:{
text:'ECharts 数据统计'
},
tooltip:{},
legend:{
data:['用户来源']
},
xAxis:{
data:["Android","IOS","PC","Ohter"]
},
yAxis:{
},
series:[{
name:'访问量',
type:'line',
data:[500,200,360,100]
}]
};
//初始化echarts实例
var myChart = echarts.init(document.getElementById('chartmain'));
//使用制定的配置项和数据显示图表
myChart.setOption(option);
</script>
5.不需引用任何其他js,纯原生实现,适合初学者,直接在浏览器打开
其他更多官方实例,点击
https://echarts.apache.org/examples/zh/index.html
找到喜欢的样式,例如第一个
直接把左侧的option复制,覆盖我最初写的option即可。