一、簡單入門
1.從官網下載echarts
http://echarts.baidu.com/download.html
2.引入echarts
-
3.0以上的版本
<html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script> </head> </html>
3.繪制柱狀圖表
-
首先在頁面上設置一個顯示區域
<body> <!-- 為 ECharts 準備一個具備大小（寬高）的 DOM --> <div id="main" style="width: 600px;height:400px;"></div> </body> -
然后通過 echarts.init 方法初始化一個 echarts 實例并通過 setOption 方法生成一個簡單的柱狀圖
<script type="text/javascript"> // 基于準備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和數據 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>
二、自定義ECharts
- 一般官方定制的echarts會滿足絕大部分業務需求，但有時也需要自定義一些echarts。
- 在線自定義構建：比較方便。
- 使用
echarts/build/build.js腳本自定義構建：比在線構建更靈活一點，并且支持多語言。 - 直接使用構建工具（如 rollup、webpack、browserify）自己構建：也是一種選擇。
三、餅狀圖
-
最簡單的圖表，不需要x y 軸。
myChart.setOption({ series : [ { name: '訪問來源', type: 'pie', radius: '55%', data:[ {value:235, name:'視頻廣告'}, {value:274, name:'聯盟廣告'}, {value:310, name:'郵件營銷'}, {value:335, name:'直接訪問'}, {value:400, name:'搜索引擎'} ] } ] })
-
設置樣式
option = { //設置全局背景色 backgroundColor: '#2c343c', visualMap: { // 不顯示 visualMap 組件，只用于明暗度的映射 show: false, // 映射的最小值為 80 min: 80, // 映射的最大值為 600 max: 600, inRange: { // 明暗度的范圍是 0 到 1 colorLightness: [0, 1] } }, series : [ { name: '訪問來源', type: 'pie', radius: '55%', data:[ {value:235, name:'視頻廣告'}, {value:274, name:'聯盟廣告'}, {value:310, name:'郵件營銷'}, {value:335, name:'直接訪問'}, { value:400, name:'搜索引擎', //設置每個扇形的樣式 itemStyle: { color: '#c23531' } }, ], //設置成南丁格爾圖 roseType: 'angle', //設置全局字體樣式 textStyle: { color: 'rgba(255, 255, 255, 0.3)' } //設置每個系利的字體樣式 label: { normal: { textStyle: { color: 'rgba(255, 255, 255, 0.3)' } } }, //設置視覺引導線的樣式 labelLine: { normal: { lineStyle: { color: 'rgba(255, 255, 255, 0.3)' } } }, //設置扇形的樣式 itemStyle: { // 陰影的大小 shadowBlur: 200, // 陰影水平方向上的偏移 shadowOffsetX: 0, // 陰影垂直方向上的偏移 shadowOffsetY: 0, // 陰影顏色 shadowColor: 'rgba(0, 0, 0, 0.5)' // 設置扇形的顏色 color: '#c23531', } } } ] };
四、ECharts 中的樣式簡介
1.顏色主題
? var chart = echarts.init(dom, 'light');
? var chart = echarts.init(dom, 'dark');
-
設置json格式的主題
// 假設主題名稱是 "vintage" xxx/xxx/ 代表路徑 $.getJSON('xxx/xxx/vintage.json', function (themeJSON) { echarts.registerTheme('vintage', JSON.parse(themeJSON)) var chart = echarts.init(dom, 'vintage'); }); -
設置js格式的主題
// HTML 引入 vintage.js 文件后（假設主題名稱是 "vintage"） var chart = echarts.init(dom, 'vintage');
2.調色盤
-
在option中全局設置
option = { // 全局調色盤。 color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'], series: [{ type: 'bar', // 此系列自己的調色盤。 color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'], ... }, { type: 'pie', // 此系列自己的調色盤。 color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'], ... }] }
3.直接設置樣式
-
鼠標懸浮時的高亮樣式
//4.0版本的寫法 option = { series: { type: 'scatter', // 普通樣式。 itemStyle: { // 點的顏色。 color: 'red' }, label: { show: true, // 標簽的文字。 formatter: 'This is a normal label.' }, // 高亮樣式。 emphasis: { itemStyle: { // 高亮時點的顏色。 color: 'blue' }, label: { show: true, // 高亮時標簽的文字。 formatter: 'This is a emphasis label.' } } } } //4.0之前的版本寫法，但是不推薦 option = { series: { type: 'scatter', itemStyle: { // 普通樣式。 normal: { // 點的顏色。 color: 'red' }, // 高亮樣式。 emphasis: { // 高亮時點的顏色。 color: 'blue' } }, label: { // 普通樣式。 normal: { show: true, // 標簽的文字。 formatter: 'This is a normal label.' }, // 高亮樣式。 emphasis: { show: true, // 高亮時標簽的文字。 formatter: 'This is a emphasis label.' } } } }
4.通過 visualMap 組件設定樣式
-
visualMap是視覺映射組件，提供了以下視覺元素：
圖形類別（symbol）、圖形大小（symbolSize）顏色（color）、透明度（opacity）、色調（colorHue）顏色透明度（colorAlpha）、顏色明暗度（colorLightness）、顏色飽和度（colorSaturation）
五、異步數據加載和更新
1.異步加載
-
圖表初始化后不管任何時候通過 jQuery 等工具異步獲取數據后通過
setOption填入數據和配置項var myChart = echarts.init(document.getElementById('main')); $.get('data.json').done(function (data) { myChart.setOption({ title: { text: '異步數據加載示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }); });
-
先設置完其它的樣式，顯示一個空的直角坐標軸，然后獲取數據后填入數據。
var myChart = echarts.init(document.getElementById('main')); // 顯示標題，圖例和空的坐標軸 myChart.setOption({ title: { text: '異步數據加載示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [] }] }); // 異步加載數據 $.get('data.json').done(function (data) { // 填入數據 myChart.setOption({ xAxis: { data: data.categories }, series: [{ // 根據名字對應到相應的系列 name: '銷量', data: data.data }] }); });
2.loading動畫
-
有時數據加載時間過長的話，需要一些過場動畫。
//顯示加載動畫 myChart.showLoading(); $.get('data.json').done(function (data) { //隱藏加載動畫 myChart.hideLoading(); myChart.setOption(...); });
3.數據的動態更新
- 定時獲取數據，setOption 填入數據，ECharts 會找到兩組數據之間的差異然后通過合適的動畫去表現數據的變化。
