echarts是百度内部工程师创作的。用JS来实现图表。几乎包括常规使用的各类图表，类如柱状图，饼状图，折线图，地图。上面有官方API和官方示例。但有个地方挺糟心的。虽然官方文档里有写，但是引入的时候还是总出问题。使得图表无法正确显示。 解决办法相对来说，非常简单。其实只是一些细节问题没注意好。 1、引入官方文档。不用想太多，就是引用个JS。
<script type="text/javascript" src="js/echarts-all-3.js"></script>就酱紫OK。 2、第二点可能是大多数出问题的地方。就是图表需要个DIV。然后在js里面写官方给的示例js。 但是div和示例js没有任何关联啊。怎么关联起来啊？！！这里就难倒了很多小伙伴。OK，其实它是这样关联的。代码说明：
<div id="stat" style="height: 700px;width: 100%; "></div> //给了个div层。用来放置图表，给层一个id。 //在官方示例js最前面添加 var myChart = echarts.init(document.getElementById('stat')); //最后面加 myChart.setOption(option); //OK整体代码为
var myChart = echarts.init(document.getElementById('stat')); var option = { title : { // text: 全市信息概览, // subtext: '测试数据', x:'center', textStyle: { color: '#fff' } }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, series : [ { name: '访问来源', type: 'pie', radius : '55%', center: ['50%', '60%'], data:(function(){ for(var i=0; i<str.length; i++){ numstr.push({value:num[i],name:str[i]}); } return numstr; })(), itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; //为echarts对象加载数据 myChart.setOption(option); </script>如果这样还是没出来，想不明白的话也别灰心。因为我之前看了很多博客，即使别人都给源代码了，我还是不会。/(ㄒoㄒ)/~~初学者的悲哀啊。 没关系，给大家一个最简单易行的方法。 1、进入echarts官网。 进入文档里面的教程。 随便点击一个示例的编辑示例。 看右上角有个什么？！！！哈哈，对，你没有看错，有个下载！！！你可以直接下载下来改。 看左上角有个什么？！！！哈哈，对，你没有看错，有个所有示例！！！你可以下载官方提供的所有实例。 这样就解决了初次使用加载不出来图表的问题。后续echarts的相关使用，我后续会讲到。例如饼状图数据的动态加载以及地图的调试之类的。有什么需要知道的，可以给我留言，我会逐一回复。
