1.下载并引入echarts2.准备一个具备大小的DOM容器(必须有宽高)3.实例化echarts实例对象4.指定配置项和数据(option)5.将配置项设置给echarts实例对象
下载并引入echarts
<script src="js/echarts.min.js"></script>
准备一个具备大小的DOM容器(必须有宽高)
<div class="box"></div>.box{ width: 400px; height: 300px; background-color: pink; }
实例化echarts实例对象
var myChart = echarts.init(document.querySelector(".box"));
指定配置项和数据(option)
var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] };
将配置项设置给echarts实例对象
将配置项设置给echarts实例对象myChart.setOption(option);