如何引入ecahrts，对于刚接触这个东西的时感觉和arcgis for javascript 很相似这里就不扯别的了直接上图
- 首先在ecahrts官网下载ecahrts-2.2.7
- 解压，echarts-2.2.7,在此目录下创建index.html1文件即可，页面的内容如下，
-
<<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>ECharts</title> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="height:800px"></div> <!-- ECharts单文件引入 --> //这个地方引入的时候一定要注意路径 <script src="build/dist/echarts.js " charset="UTF-8"></script> <script src="build/dist/chart/bar.js" charset="UTF-8"></script> <script type="text/javascript"> // 路径配置，这个地方必须用模块引入的方式，老版本的可以用引用源文件的方式，新版本会报错required //undefined,所以在报错required或者defined is undefined的时候首先检查文见ecahrts.js是否 //引入正确. require.config({ paths: { echarts: ‘build/dist‘ } }); // 使用 require( [ ‘echarts‘, ‘echarts/chart/bar‘ // 使用柱状图就加载bar模块，按需加载 ], function (ec) { // 基于准备好的dom，初始化echarts图表 var myChart = ec.init(document.getElementById(‘main‘)); var option = { tooltip: { show: true }, legend: { data:[‘销量‘] }, xAxis : [ { type : ‘category‘, data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] } ], yAxis : [ { type : ‘value‘ } ], series : [ { "name":"销量", "type":"bar", "data":[5, 20, 40, 10, 10, 20] } ] }; // 为echarts对象加载数据 myChart.setOption(option); } ); </script> </body> - 在遇到页面展示中文乱码的时候：
-
（1）<script src="build/dist/echarts.js " charset="UTF-8"></script>
（2）将你的js文件或者整个html文件重新编码，修改成utf-8无BOM编码格式。
记住：在转换后要习惯性的ctrl+s，然后清除浏览器缓存，刷新页面，就不会出现中文乱码了。
时间： 2024-08-01 22:41:58