ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。路径结果如下：
1 <body> 2 <div></div> //为 ECharts 准备一个具备高宽的 DOM 容器。 3 ... 4 <script src="https://www.linuxidc.com/js/echarts.js"></script> 5 <script> 6 var myChart = echarts.init(document.getElementById('main')); //基于准备好的dom，初始化echarts实例 7 var option = { 8 ... //指定图表的配置项和数据 9 } 10 myChart.setOption(option); //使用刚指定的配置项和数据显示图表。 11 </script> 12 </body>
三、 具体小实例由于Echarts中的属性很多，接下来我就通过两个小李子给大家介绍一下其中的基本属性的使用吧~~~
3.1实例一：柱状图<script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { //标题，每个图表最多仅有一个标题控件，每个标题控件可设主副标题。 text: 'ECharts 入门示例', //主标题文本 subtext:'该图表纯属虚构', //副标题文本 x:'left', //标题水平安放位置，默认为left。可选值有left、right、center y:'top', //标题垂直安放位置，默认为top。可选值有top、bottom、center textAlign:'left', //标题水平对齐方式，默认根据x设置自动调整。可选值有left、right、center backgroundColor:'rgba(0,0,0,0)', //标题背景颜色，默认透明 textStyle:{ //主标题文本样式 fontSize: 18, fontWeight: 'bolder', color: '#333' }, subtextStyle:{ color: '#aaa' //副标题文本样式 } }, tooltip: {}, //提示框，鼠标悬浮交互时的信息提示。 legend: { //图例，每个图表最多仅有一个图例。 data:['销量'], //图例内容数组 x:'center', //图例水平安放位置，默认为全图居中。可选值有left、right、center y:'top', //图例垂直安放位置，默认为top。可选值有top、bottom、center }, xAxis: { //直角坐标系中横轴数组 data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, //直角坐标系中纵轴数组 series: [{ //数据内容 name: '销量', //系列名称，如启用legend，该值将被legend.data索引相关 type: 'bar', //图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。可选值为line(折线图)，bar(柱状图)，scatter(散点图) data: [5, 20, 36, 10, 10, 20] //数据 }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script
运行效果：