目录
1.引入ECharts
2.准备容器
3.初始化实例
4.ECharts使用实例
(1)指定图表的配置项和数据
(2)显示图表
5.整体代码:
6.运行展示:
7.ECharts中常见的图标名称以及含义
8.ECharts常见的配置项参数
1.引入ECharts
<script src="echarts.min.js"></script>
复制
2.准备容器
<div id="main" style="width: 600px;height:400px;"></div>
复制
3.初始化实例
var myChart = echarts.init(document.getElementById('main'));
复制
4.ECharts使用实例
(1)指定图表的配置项和数据
var option = { title: { text: '' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [ { name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] } ] };
复制
(2)显示图表
myChart.setOption(option);
复制
5.整体代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="echarts.min.js"></script> </head> <body> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { //图表标题 text: '' }, //提示框组件 tooltip: {}, //图例 legend: { data: ['销量'] }, //横轴 xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, //纵轴 yAxis: {}, series: [ { name: '销量', //图表类型 type: 'bar', data: [5, 20, 36, 10, 10, 20] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>
复制