ECharts開源圖表使用方法簡單介紹

時間 2019-11-26

標籤 echarts 開源圖表使用方法簡單介紹简体版

原文原文鏈接

ECharts圖表是基於Canvas，純Javascript圖表庫，基於BSD開源協議，官網地址：http://echarts.baidu.com/index.htmljavascript

須要先下載插件：https://github.com/ecomfe/echarts/archive/1.4.1.ziphtml

1. 首先須要在文件中引入JS庫，能夠使用百度的CDNjava

<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>

2. 以後建立一個用於顯示圖表的DIVgit

<div id="pie" style="height:400px"></div>
    
<div id="bar" style="height:400px"></div>

3. 配置加載的圖表類型及路徑github

<script type="text/javascript">
        // 路徑配置
        require.config({
            paths:{ 
                'echarts' : 'http://echarts.baidu.com/build/echarts',
                'echarts/chart/bar' : 'http://echarts.baidu.com/build/echarts',
        'echarts/chart/pie' : 'http://echarts.baidu.com/build/echarts'
            }
        });
</script>

4. 配置圖表數據echarts

optionpie = {
　　title: {
　　　　text: '2014年04月客戶總滿意度比例圖',subtext: '測試人員',x: 'center'
　　},
　　tooltip: {
　　　　trigger: 'item',
　　　　formatter: "{a}<br/>{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}<br/>{a0} : {c0}<br/>{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. 將數據顯示在圖表中ide

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 <!DOCTYPE html>
  2 <head>
  3     <meta charset="utf-8">
  4     <title>Demo</title>
  5     <!-- 來自百度CDN -->
  6     <script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
  7 </head>
  8 <body>
  9     <!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
 10     <div id="pie" style="height:400px"></div>
 11     
 12      <div id="bar" style="height:400px"></div>
 13     <script type="text/javascript">
 14         // 路徑配置
 15         require.config({
 16             paths:{ 
 17                 'echarts' : 'http://echarts.baidu.com/build/echarts',
 18                 'echarts/chart/bar' : 'http://echarts.baidu.com/build/echarts',
 19                 'echarts/chart/pie' : 'http://echarts.baidu.com/build/echarts'
 20             }
 21         });
 22         
 23         optionpie = {
 24 title: {
 25 text: '2014年04月客戶總滿意度比例圖',subtext: '測試人員',x: 'center'
 26 },
 27 tooltip: {
 28 trigger: 'item',
 29 formatter: "{a}<br/>{b} : {c} ({d}%)"
 30 },
 31 legend: {
 32 orient: 'vertical',
 33 x: 'left',
 34 data: ['滿意', '不滿意']
 35 },
 36 toolbox: {
 37 show: true,
 38 feature: {
 39 restore: true,
 40 saveAsImage: true
 41 }
 42 },
 43 calculable: true,
 44 series: [
 45 {
 46 name: '總滿意度百分比',
 47 type: 'pie',
 48 radius: '55%',
 49 center: ['50%', 225],
 50 data: [
 51 { value: 100, name: '滿意' },
 52 { value: 16, name: '不滿意'}
 53 ]
 54 }
 55 ]
 56 };
 57 option = {
 58 title: {
 59 text: '2014年04月客戶滿意度分佈圖',subtext: '測試人員',x: 'left'
 60 },
 61 tooltip: {
 62 trigger: 'axis',
 63 formatter: "{b}<br/>{a0} : {c0}<br/>{a1} : {c1}"
 64 },
 65 legend: {
 66 x: 'right',
 67 padding: [5,70,5,5],
 68 data: ['滿意', '不滿意']
 69 },
 70 toolbox: {
 71 show: true,
 72 feature: {
 73 restore: true,
 74 saveAsImage: true
 75 }
 76 },
 77 calculable: true,
 78 xAxis: [
 79 {
 80 type: 'category',
 81 data: ['客服人員滿意度', '維修人員滿意度', '售後人員滿意度']
 82 }
 83 ],
 84 yAxis: [
 85 {
 86 type: 'value',
 87 splitArea: { show: true }
 88 }
 89 ],
 90 series: [
 91 {
 92 name: '滿意',
 93 type: 'bar',
 94 radius: '55%',
 95 center: ['50%', 225],
 96 data: [10, 5, 8]},
 97 {
 98 name: '不滿意',
 99 type: 'bar',
100 radius: '55%',
101 center: ['50%', 225],
102 data: [2, 4, 6]}
103 ]
104 };
105 require(
106 [
107 'echarts',
108 'echarts/chart/pie',
109 'echarts/chart/bar'
110 ],
111 function (ec) {
112 var pieChart = ec.init(document.getElementById('pie'));
113 pieChart.setOption(optionpie);
114 var myChart = ec.init(document.getElementById('bar'));
115  myChart.setOption(option);
116 }
117 )
118     </script>
119 </body>