ECharts图表是基于Canvas，纯Javascript图表库，基于BSD开源协议，官网地址：

 

需要先下载插件：

1. 首先需要在文件中引入JS库，可以使用百度的CDN

2. 之后创建一个用于显示图表的DIV

3. 配置加载的图表类型及路径

4. 配置图表数据

optionpie = {　　title: {　　　　text: '2014年04月客户总满意度比例图',subtext: '测试人员',x: 'center'　　},　　tooltip: {　　　　trigger: 'item',　　　　formatter: "{a}
{b} : {c} ({d}%)"　　},　　legend: {　　　　orient: 'vertical',　　　　x: 'left',　　　　data: ['满意', '不满意']　　},　　toolbox: {　　　　show: true,　　　　feature: {　　　　　　restore: true,　　　　　　saveAsImage: true　　　　}　　},　　calculable: true,　　series: [　　{　　　　name: '总满意度百分比',　　　　type: 'pie',　　　　radius: '55%',　　　　center: ['50%', 225],　　　　data: [　　　　{ value: 100, name: '满意' },　　　　{ value: 16, name: '不满意'}　　]　　}　　]};option = {　　title: {　　　　text: '2014年04月客户满意度分布图',subtext: '测试人员',x: 'left'　　},　　tooltip: {　　　　trigger: 'axis',　　　　formatter: "{b}
{a0} : {c0}
{a1} : {c1}"　　},　　legend: {　　　　x: 'right',　　　　padding: [5,70,5,5],　　　　data: ['满意', '不满意']　　},　　toolbox: {　　　　show: true,　　　　feature: {　　　　　　restore: true,　　　　　　saveAsImage: true　　　　}　　},　　calculable: true,　　xAxis: [　　{　　　　type: 'category',　　　　data: ['客服人员满意度', '维修人员满意度', '售后人员满意度']　　}　　],　　yAxis: [　　{　　　　type: 'value',　　　　splitArea: { show: true }　　}　　],　　series: [　　{　　　　name: '满意',　　　　type: 'bar',　　　　radius: '55%',　　　　center: ['50%', 225],　　　　data: [10, 5, 8]},　　{　　　　name: '不满意',　　　　type: 'bar',　　　　radius: '55%',　　　　center: ['50%', 225],　　　　data: [2, 4, 6]}　　]};

 

5. 将数据显示在图表中

require([　　'echarts',　　'echarts/chart/pie',　　'echarts/chart/bar'],function (ec) {　　//饼状图　　var pieChart = ec.init(document.getElementById('pie'));　　pieChart.setOption(optionpie);　　　　//柱状图　　var myChart = ec.init(document.getElementById('bar'));　　myChart.setOption(option);})

通过以上即可完成图表的配置，这里附上完整的代码

1   2   3     
        4       5     
        6       7   8   9     
       10     
      
 11      12      
      
 13     119 

 完整代码复制到html中可以直接运行

完整的API可以参考官网：