文章目錄

• echarts
• • 使用
  • • 漸變色
  • 一些配置項
  • dataset與transform數據過濾
  • • dataset
    • transform
  • 動態排序
  • 時間軸更新數據
  • 極坐標系

echarts

官網https://echarts.apache.org/zh/index.html

使用

1.首先需要先引入echarts

html直接引入js文件

<script src="../echarts.min.js"></script>

vue項目中需要先安裝

npm install echarts --save

然后在需要的地方引入

import * as echarts from 'echarts'

2.初始化dom節點

首先得有一個dom節點容器

<div id="main" style="height: 600px;width: 800px;"></div>

然后對其進行echarts初始化

let myCharts = echarts.init(document.getElementById('main'))

3.配置option，繪制一個圖標

let option = {title:{text:'echars使用示例',subtext:'副標題'},legend:{data:['series']},tooltip:{},xAxis:{type:'category',data:['星期一','星期二','星期三','星期四','星期五','星期六','星期日',]},yAxis:{type:'value'},series:[{ name:'series',type:'bar',data:[10,20,30,40,50,60,70]}] }

4.使用上述設置的option顯示圖表

myCharts.setOption(option)

成功顯示

漸變色

有個echarts.graphic.LineaGradient()一個方法可以用來設置漸變色.其中有五個參數，前四個參數分別代表變色方位右下上左，0,0,0,1表示漸變色從正上方開始，1，0，0，0，表示漸變色從右邊開始等，

第五個參數是一個數組，用于配置顏色的漸變過程，offset范圍為0~1,color表示顏色，可以設置多個顏色漸變

上代碼

{type: 'bar',itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'yellow'}, {offset: 1,color: 'red'}])},data: [10, 20, 30, 40, 50, 60, 70]}

還有另一種漸變方式

線性漸變，前四個參數分別是 x0, y0, x2, y2, (右下左上)范圍從 0 - 1，相當于在圖形包圍盒中的百分比，如果 globalCoord 為 true，則該四個值是絕對的像素位置

下述代碼和上面的示例效果一樣

color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: 'red' // 0% 處的顏色}, {offset: 1,color: 'yellow' // 100% 處的顏色}],global: false // 默認為 false} 徑向漸變，前三個參數分別是圓心 x, y 和半徑，取值同線性漸變 color: {type: 'radial',x: 0.5,y: 0.5,r: 0.5,colorStops: [{offset: 0, color: 'red' // 0% 處的顏色}, {offset: 1, color: 'blue' // 100% 處的顏色}],global: false // 缺省為 false }

紋理填充 color: {image: imageDom, // 支持為 HTMLImageElement, HTMLCanvasElement，不支持路徑字符串repeat: 'repeat' // 是否平鋪, 可以是 'repeat-x', 'repeat-y', 'no-repeat' }

一些配置項

1.折線圖平滑曲線：

smooth:true

2.折線圖點樣式

symbol:'rect/triangle/cirle/...' //點的樣式 none為不顯示 symbolSize:5 //點的大小

3.折線圖面積

areaStyle:{opacity:0.8,color:'red' }

4.標記點，標記行,標記區域

markPoint:{symbolSize:10,itemStyle:{color:'red'}data:[{type:'max',name:'最大值'},{type:'min',name:'最小值'},{ //指定坐標coord:[1,10]}] }, markLine{lineStyle:{color:'red'},data:[{name:'start'coord:[0,1],label:'標記線'},{name:'end',coord:[3,1]}，{ //標記第一列xAxis:1}] },markArea:{itemStyle:{color:'red'},data:[[{name:'area1',xAxis:0},{xAxis:1}],[{name:'area2',xAxis:5},{xAxis:6}]] }

5.數據過濾

transform:{id:'dataset_since_2015_china'type:'filter',config:{and:[//交集 or/not { //年份大于等于2015dimension:'Year',gte:2015},{ //國家為中國dimension:'Country''=':'China'}]} } //引用transform series:{.... datasetId:'dataset_since_2015_china'.... }

6.visualmap漸變

visualMap:[{ //側邊顏色指示框show:fasle,//設置為連續型type:'continuous',//選擇第一個seriesseriesIndex:0,//漸變值從0-400min:0,max:400}，{show: false,type: 'continuous',seriesIndex: 1,//x軸dimension: 0,min: 0,max: dateList.length - 1} ]

7.區域縮放dataZoom

dataZoom:[{type:'inside',start:0,end:10},{start:0,end:10} ]

8.visualMap碎片式樣式

visualMap:{show:false,//x軸dimension:0,pieces:[{lte:6,color:'red'},{gt:6,color:'blue'}//小于等于6的顏色為紅色，大于6的顏色為藍色] }

9.tooltip

tooltip:{//軸線觸發trigger:'axis',axisPointer:{//十字type:'cross' //shadow陰影//數據格式化formatter:'{a},{b},{c},ozvdkddzhkzd'} }

10.軸線配置

//刻度線 axisTick:{show:true,//和標簽對齊alignWithLabel:true } //軸線 axisLine:{//是否從0開始,默認從0開始onZero:false,//軸線樣式lineStyle:{color:'red'} } // tooltip觸發axis時配置 axisPointer:{label:{//標簽數據格式化formatter:params=>{return '降水量 ' + params.value+ (params.seriesData.length ? '：' + params.seriesData[0].data : '');}} }

11.階梯折線圖

series:{...type:'line'step:'start/middle/line' ... }

12.柱狀圖背景色

series:{...type:'bar',showBackground:true,backgroundStyle:{color:'red'}... }

13.series標簽配置

series:{...label:{show:true,position:'top'....}... }

14.堆疊

series:{stack:'stack' //stack值相同時堆疊 }

15.富文本rich

//軸線標簽配置項 axisLabel:{formatter:function(value){//value為標簽的值return '{' + value + '| }\n{value|' + value + '}';},rich:{value:{//富文本樣式lineHeight:30，align:'center'},value:{height:40,align:'center',backgroundColor:{image:'/....' //圖片地址} }} }

16.legend選擇器

legend:{left:'center',data:['data1','data2','data3'],selected:{//是否選擇，默認為true'data1':false,} }

17.visualmap顏色映射

visualMap:{//水平方向orient:'horizontal',//水平居中left:'center',//映射數據范圍min:0,max:100,//選擇數據映射dimension:0,//配置映射顏色inRange:{color:['red','yellow','blue']} }

dataset與transform數據過濾

dataset

首先dataset是從echarts4之后才有的，之前數據只能生命在各個系列中.

dataset可以單獨聲明數據

例子

option={...dataset:{source: [//第一行的數據默認為維度名，第二行開始才是數據//如果想讓第一行就是數據，那么可以設置dataset.sourceHeader:false//默認第一列映射到category軸['product', '2015', '2016', '2017'],['Matcha Latte', 43.3, 85.8, 93.7],['Milk Tea', 83.1, 73.4, 55.1],['Cheese Cocoa', 86.4, 65.2, 82.5],['Walnut Brownie', 72.4, 53.9, 39.1]]},xAxis:{type:'category'},yXis:{}//source的維度會自動按列映射到series中，也可以設置//seriesLayoutBy：'row' 按行映射series:[{//seriesLayoutBy:'row'type:'bar'//可以直接使用encode指定x軸和y軸的數據encode:{x:'product',y:'2015'}},{type:'bar'}, {type:'bar'},]... }

encode支持的屬性：

// 在任何坐標系和系列中，都支持： encode: {// 使用 “名為 product 的維度” 和 “名為 score 的維度” 的值在 tooltip 中顯示tooltip: ['product', 'score']// 使用 “維度 1” 和 “維度 3” 的維度名連起來作為系列名。（有時候名字比較長，這可以避免在 series.name 重復輸入這些名字）seriesName: [1, 3],// 表示使用 “維度2” 中的值作為 id。這在使用 setOption 動態更新數據時有用處，可以使新老數據用 id 對應起來，從而能夠產生合適的數據更新動畫。itemId: 2,// 指定數據項的名稱使用 “維度3” 在餅圖等圖表中有用，可以使這個名字顯示在圖例（legend）中。itemName: 3 }// 直角坐標系（grid/cartesian）特有的屬性： encode: {// 把 “維度1”、“維度5”、“名為 score 的維度” 映射到 X 軸：x: [1, 5, 'score'],// 把“維度0”映射到 Y 軸。y: 0 }// 單軸（singleAxis）特有的屬性： encode: {single: 3 }// 極坐標系（polar）特有的屬性： encode: {radius: 3,angle: 2 }// 地理坐標系（geo）特有的屬性： encode: {lng: 3,lat: 2 }// 對于一些沒有坐標系的圖表，例如餅圖、漏斗圖等，可以是： encode: {value: 3 }

transform

dataset.transform是echarts5開始支持的一種數據轉換的功能,

抽象地來說，數據轉換是這樣一種公式：outData = f(inputData)。f 是轉換方法，例如：filter、sort、regression、boxplot、cluster、aggregate(todo) 等等。有了數據轉換能力后，我們就至少可以做到這些事情：

• 把數據分成多份用不同的餅圖展現。
• 進行一些數據統計運算，并展示結果。
• 用某些數據可視化算法處理數據，并展示結果。
• 數據排序。
• 去除或直選擇數據項。

option={dataset:[//datasetIndex=0{source: [['Product', 'Sales', 'Price', 'Year'],['Cake', 123, 32, 2011],['Cereal', 231, 14, 2011],['Tofu', 235, 5, 2011],['Dumpling', 341, 25, 2011],['Biscuit', 122, 29, 2011],['Cake', 143, 30, 2012],['Cereal', 201, 19, 2012],['Tofu', 255, 7, 2012],['Dumpling', 241, 27, 2012],['Biscuit', 102, 34, 2012],['Cake', 153, 28, 2013],['Cereal', 181, 21, 2013],['Tofu', 395, 4, 2013],['Dumpling', 281, 31, 2013],['Biscuit', 92, 39, 2013],['Cake', 223, 29, 2014],['Cereal', 211, 17, 2014],['Tofu', 345, 3, 2014],['Dumpling', 211, 35, 2014],['Biscuit', 72, 24, 2014],],},{transform:{//過濾操作type:'filter',//config下可以設置多個規則,and/or/notconfig:{//dimension選擇維度//維度為Year，值=2011的數據and:[{dimension:'Year','=':2011}//維度為sales，值大于100的數據{dimesion:'sales',gt:100}]//最后取交集},} }],series:[{type:'pie'},{type:'pie'},{type:'pie'},] }

常見的對象數組格式：

option={...dataset:{// 用 dimensions 指定了維度的順序。直角坐標系中，// 默認把第一個維度映射到 X 軸上，第二個維度映射到 Y 軸上。// 如果不指定 dimensions，也可以通過指定 series.encodedimensions: ['product', '2015', '2016', '2017'],source: [{product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},{product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},{product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},{product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}]}... }

動態排序

1.首先開啟圖表的實時排序

series:{...realTimesort:true... } //默認升序 //降序可對具體的坐標軸進行inverse:true 的翻轉操作

2.設置圖表的動畫時長

option={...//初始圖表的動畫時長animationDuration:0,//更新圖表時動畫時長animationDurationUpdate:3000// 初始動畫的緩效果 animationEasing: 'linear',animationEasingUpdate: 'linear',... }

3.設置x軸或y軸的動畫時長

xAxis/yAxis:{...// 倒序inverse: true,animationDuration: 300,animationDurationUpdate: 300... }

4.定時更新數據

setInterVal(()=>{update() },3000)

時間軸更新數據

時間軸使用需要多個option，用來實現切換。

1.首先配置baseOption和options

option={baseOption:{xAxis:{...},yAxis:{...}...series:{...//data可以暫時不寫}},options[{series:{data:[...]},{series:{data:[...]},{series:{data:[...]},{series:{data:[...]},] }

2.在baseOption中配置timeline

baseOption:{...timeline:{axisType: 'category',//是否自動播放autoPlay: true,//播放時間間隔playInterval: 1000,//時間軸數據data: ['time1', 'time2', 'time3', 'time4', 'time5']}... }

極坐標系

1.首先和直角坐標系不同的是，極坐標系需要配置 angleAxis ,radiusAxis,polar屬性而不用xAxis，yAxis。

option={...//上圖的valueangleAxis:{axisTick:{show:false},//分割線splitLine:{show:true}},// 上圖的categoryradiusAxis:{type: 'category',data: ['周一', '周二', '周三', '周四'],z: 10,axisTick: {show: false}},//定義此坐標系為polarpolar:{}... }

2.然后需要在series中生命用的是polar極坐標系

series:{...//默認為cartesian2d，也就是直角坐標系，極坐標系需要聲明coordinateSystem:'polar'//指定相應的極坐標組件porlarIndex:0... }

總結

以上是生活随笔為你收集整理的数据可视化echarts学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。