1、引入ECharts脚本
<script src ="js/echarts.js" ></script>
2、为ECharts准备一个具备大小（宽高）的DOM
<div id="main" style="width: 900px; height: 600px"></div>
3、基于准备好的DOM，初始化ECharts图表，结构要弄清楚
var myChart = echarts.init(document.getElementById("main"));
4、指定图表的配置项和数据
5、最后使用刚指定的配置项和数据
6、然后启动html文件
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--引入ECharts脚本-->
<script src ="js/echarts.min.js" ></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的DOM -->
<div id="main" style="width: 900px; height: 600px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
var option ={
title:{
backgroundColor:'yellow', //设置标题的背景颜色
text:'这里是绘制的图表的标题',
subtext:'这里是副标题'
},
legend:{
data:['销量']
},
xAxis: { // x的坐标轴
type:'category',
data: ['红枣', '草莓', '柠檬', '香蕉', '车厘子', '雪梨'] //数据
},
yAxis: {
type:'value'
}, //y的坐标轴
series: [{
name:'销量',
data: [5, 12, 18, 10, 15, 9],
type: 'bar' //柱状图
}]
}
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
