一樊拓、簡單入門
1.從官網(wǎng)下載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.繪制柱狀圖表
-
首先在頁面上設(shè)置一個顯示區(qū)域
<body> <!-- 為 ECharts 準(zhǔn)備一個具備大斜矍蕖（寬高）的 DOM --> <div id="main" style="width: 600px;height:400px;"></div> </body> -
然后通過 echarts.init 方法初始化一個 echarts 實例并通過 setOption 方法生成一個簡單的柱狀圖
<script type="text/javascript"> // 基于準(zhǔn)備好的dom嗜侮，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和數(shù)據(jù) var option = { title: { text: 'ECharts 入門示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用剛指定的配置項和數(shù)據(jù)顯示圖表刊咳。 myChart.setOption(option); </script>
二鲁冯、自定義ECharts
- 一般官方定制的echarts會滿足絕大部分業(yè)務(wù)需求鹦筹，但有時也需要自定義一些echarts介衔。
- 在線自定義構(gòu)建：比較方便。
- 使用
echarts/build/build.js腳本自定義構(gòu)建：比在線構(gòu)建更靈活一點，并且支持多語言航缀。 - 直接使用構(gòu)建工具（如 rollup商架、webpack、browserify）自己構(gòu)建：也是一種選擇芥玉。
三蛇摸、餅狀圖
-
最簡單的圖表，不需要x y 軸灿巧。
myChart.setOption({ series : [ { name: '訪問來源', type: 'pie', radius: '55%', data:[ {value:235, name:'視頻廣告'}, {value:274, name:'聯(lián)盟廣告'}, {value:310, name:'郵件營銷'}, {value:335, name:'直接訪問'}, {value:400, name:'搜索引擎'} ] } ] })
-
設(shè)置樣式
option = { //設(shè)置全局背景色 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:'聯(lián)盟廣告'}, {value:310, name:'郵件營銷'}, {value:335, name:'直接訪問'}, { value:400, name:'搜索引擎', //設(shè)置每個扇形的樣式 itemStyle: { color: '#c23531' } }, ], //設(shè)置成南丁格爾圖 roseType: 'angle', //設(shè)置全局字體樣式 textStyle: { color: 'rgba(255, 255, 255, 0.3)' } //設(shè)置每個系利的字體樣式 label: { normal: { textStyle: { color: 'rgba(255, 255, 255, 0.3)' } } }, //設(shè)置視覺引導(dǎo)線的樣式 labelLine: { normal: { lineStyle: { color: 'rgba(255, 255, 255, 0.3)' } } }, //設(shè)置扇形的樣式 itemStyle: { // 陰影的大小 shadowBlur: 200, // 陰影水平方向上的偏移 shadowOffsetX: 0, // 陰影垂直方向上的偏移 shadowOffsetY: 0, // 陰影顏色 shadowColor: 'rgba(0, 0, 0, 0.5)' // 設(shè)置扇形的顏色 color: '#c23531', } } } ] };
四、ECharts 中的樣式簡介
1.顏色主題
? var chart = echarts.init(dom, 'light');
? var chart = echarts.init(dom, 'dark');
-
設(shè)置json格式的主題
// 假設(shè)主題名稱是 "vintage" xxx/xxx/ 代表路徑 $.getJSON('xxx/xxx/vintage.json', function (themeJSON) { echarts.registerTheme('vintage', JSON.parse(themeJSON)) var chart = echarts.init(dom, 'vintage'); }); -
設(shè)置js格式的主題
// HTML 引入 vintage.js 文件后（假設(shè)主題名稱是 "vintage"） var chart = echarts.init(dom, 'vintage');
2.調(diào)色盤
-
在option中全局設(shè)置
option = { // 全局調(diào)色盤抠藕。 color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'], series: [{ type: 'bar', // 此系列自己的調(diào)色盤饿肺。 color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'], ... }, { type: 'pie', // 此系列自己的調(diào)色盤。 color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'], ... }] }
3.直接設(shè)置樣式
-
鼠標(biāo)懸浮時的高亮樣式
//4.0版本的寫法 option = { series: { type: 'scatter', // 普通樣式盾似。 itemStyle: { // 點的顏色敬辣。 color: 'red' }, label: { show: true, // 標(biāo)簽的文字。 formatter: 'This is a normal label.' }, // 高亮樣式零院。 emphasis: { itemStyle: { // 高亮?xí)r點的顏色溉跃。 color: 'blue' }, label: { show: true, // 高亮?xí)r標(biāo)簽的文字。 formatter: 'This is a emphasis label.' } } } } //4.0之前的版本寫法告抄，但是不推薦 option = { series: { type: 'scatter', itemStyle: { // 普通樣式撰茎。 normal: { // 點的顏色。 color: 'red' }, // 高亮樣式打洼。 emphasis: { // 高亮?xí)r點的顏色龄糊。 color: 'blue' } }, label: { // 普通樣式。 normal: { show: true, // 標(biāo)簽的文字募疮。 formatter: 'This is a normal label.' }, // 高亮樣式炫惩。 emphasis: { show: true, // 高亮?xí)r標(biāo)簽的文字。 formatter: 'This is a emphasis label.' } } } }
4.通過 visualMap 組件設(shè)定樣式
-
visualMap是視覺映射組件阿浓，提供了以下視覺元素：
圖形類別（symbol）诡必、圖形大小（symbolSize）顏色（color）搔扁、透明度（opacity）爸舒、色調(diào)（colorHue）顏色透明度（colorAlpha）、顏色明暗度（colorLightness）稿蹲、顏色飽和度（colorSaturation）
五扭勉、異步數(shù)據(jù)加載和更新
1.異步加載
-
圖表初始化后不管任何時候通過 jQuery 等工具異步獲取數(shù)據(jù)后通過
setOption填入數(shù)據(jù)和配置項var myChart = echarts.init(document.getElementById('main')); $.get('data.json').done(function (data) { myChart.setOption({ title: { text: '異步數(shù)據(jù)加載示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }); });
-
先設(shè)置完其它的樣式，顯示一個空的直角坐標(biāo)軸苛聘，然后獲取數(shù)據(jù)后填入數(shù)據(jù)涂炎。
var myChart = echarts.init(document.getElementById('main')); // 顯示標(biāo)題忠聚，圖例和空的坐標(biāo)軸 myChart.setOption({ title: { text: '異步數(shù)據(jù)加載示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [] }] }); // 異步加載數(shù)據(jù) $.get('data.json').done(function (data) { // 填入數(shù)據(jù) myChart.setOption({ xAxis: { data: data.categories }, series: [{ // 根據(jù)名字對應(yīng)到相應(yīng)的系列 name: '銷量', data: data.data }] }); });
2.loading動畫
-
有時數(shù)據(jù)加載時間過長的話，需要一些過場動畫唱捣。
//顯示加載動畫 myChart.showLoading(); $.get('data.json').done(function (data) { //隱藏加載動畫 myChart.hideLoading(); myChart.setOption(...); });
3.數(shù)據(jù)的動態(tài)更新
- 定時獲取數(shù)據(jù)两蟀，setOption 填入數(shù)據(jù)，ECharts 會找到兩組數(shù)據(jù)之間的差異然后通過合適的動畫去表現(xiàn)數(shù)據(jù)的變化震缭。
