N.1 安装配置
1）安装版本介绍 （1）完全版：echarts/dist/echarts.js，体积最大，包含所有的图表和组件，所包含内容参见：echarts/echarts.all.js。(里面包括很多图形，建议使用该类库) （2）常用版：echarts/dist/echarts.common.js，体积适中，包含常见的图表和组件，所包含内容参见：echarts/echarts.common.js。(里面包括常见图形,但有的没有,) （3）精简版：echarts/dist/echarts.simple.js，体积较小，仅包含最常用的图表和组件，所包含内容参见：echarts/echarts.simple.js。 2）独立版本安装 （1）下载地址 Tags · apache/echarts · GitHub |
（2）文件解压后的结构 其中theme是主题 是可选的 |
3）非独立版安装 其实就是独立版本的 echarts.xxx.js 文件拷贝出来 |
N.2 案例演示
<script> </script>标签可以放在<html> </html>表情外面 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>第一个 ECharts 实例</title> <!-- 引入 echarts.js --> <script src="D:\software\echarts-5.3.3\dist\echarts.common.js"></script> <script src="D:\software\echarts-5.3.3\theme\vintage.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="id1" style="width: 600px;height:400px;"></div> </body> </html> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例，vintage背景参数是可选的 var myChart = echarts.init(document.getElementById('id1'),'vintage'); // 指定图表的配置项和数据 var option = { title: { text: '第一个 ECharts 实例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> |
创建一个test.html的文件夹
可以使用功能DW工具开发
N.3 官方模板
面板案例下载 Examples - Apache ECharts
