简单的echart使用方法
1.引入外部echart的js文件
<script type="text/javascript" src="js/echarts.min.js"></script>
2.建立放置容器，div使用放置容器布局
`
放置容器配置
<style>body {text-align: center;}#domain1 {width: 600px;height: 400px;}</style>`
div格局应用
`
<div id="domain1">
</div>`
3.编写javascript
a.初始化echarts案例
var myCharts=echarts.init(document.getElementById(“id(容器id)”));
b.指定图表配置，添加数据，完成option配置
var option={
}
c.使用指定的配置和数据显示
myCharts.setOption(option);
4.实例演示:
源码:
`
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>pine chart</title><script type="text/javascript" src="js/echarts.min.js"></script><!-- 容器css配置 --><style>body {text-align: center;}#domain1 {width: 600px;height: 400px;}</style>
</head><body><h1>echart初学</h1><div id="domain1"></div><script type="text/javascript">//初始化echarts案例var myCharts = echarts.init(document.getElementById("domain1"));//指定图表配置，添加数据//1.柱状图var option = {title: {text: '期中考试成绩'},tooltip: {},legend: {data: ['人数']},xAxis: {data: ["60分以下", "60~69", "70~79", "80~89", "90~99", "100"]},yAxis: {},series: [{name: '人数',type: 'bar',data: [5, 15, 36, 10, 7, 1]}]};//使用指定的配置和数据显示myCharts.setOption(option);</script>
</body>
</html>
`
运行结果:
option配置里的引用可以去官网找，根据自己的个人需求修改即可。echart官网
echart的js也可以去官网下载，或者使用下面这个免费的连接。echart免费资源
