文章目錄

• echarts
• • 使用
  • • 漸變色
  • 一些配置項(xiàng)
  • dataset與transform數(shù)據(jù)過濾
  • • dataset
    • transform
  • 動(dòng)態(tài)排序
  • 時(shí)間軸更新數(shù)據(jù)
  • 極坐標(biāo)系

echarts

官網(wǎng)https://echarts.apache.org/zh/index.html

使用

1.首先需要先引入echarts

html直接引入js文件

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

vue項(xiàng)目中需要先安裝

npm install echarts --save

然后在需要的地方引入

import * as echarts from 'echarts'

2.初始化dom節(jié)點(diǎn)

首先得有一個(gè)dom節(jié)點(diǎn)容器

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

然后對(duì)其進(jìn)行echarts初始化

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

3.配置option，繪制一個(gè)圖標(biāo)

let option = {title:{text:'echars使用示例',subtext:'副標(biāo)題'},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.使用上述設(shè)置的option顯示圖表

myCharts.setOption(option)

成功顯示

漸變色

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

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

上代碼

{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]}

還有另一種漸變方式

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

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

color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: 'red' // 0% 處的顏色}, {offset: 1,color: 'yellow' // 100% 處的顏色}],global: false // 默認(rèn)為 false} 徑向漸變，前三個(gè)參數(shù)分別是圓心 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' }

一些配置項(xiàng)

1.折線圖平滑曲線：

smooth:true

2.折線圖點(diǎn)樣式

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

3.折線圖面積

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

4.標(biāo)記點(diǎn)，標(biāo)記行,標(biāo)記區(qū)域

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

5.數(shù)據(jù)過濾

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

6.visualmap漸變

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

7.區(qū)域縮放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的顏色為藍(lán)色] }

9.tooltip

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

10.軸線配置

//刻度線 axisTick:{show:true,//和標(biāo)簽對(duì)齊alignWithLabel:true } //軸線 axisLine:{//是否從0開始,默認(rèn)從0開始onZero:false,//軸線樣式lineStyle:{color:'red'} } // tooltip觸發(fā)axis時(shí)配置 axisPointer:{label:{//標(biāo)簽數(shù)據(jù)格式化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標(biāo)簽配置

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

14.堆疊

series:{stack:'stack' //stack值相同時(shí)堆疊 }

15.富文本rich

//軸線標(biāo)簽配置項(xiàng) axisLabel:{formatter:function(value){//value為標(biāo)簽的值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:{//是否選擇，默認(rèn)為true'data1':false,} }

17.visualmap顏色映射

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

dataset與transform數(shù)據(jù)過濾

dataset

首先dataset是從echarts4之后才有的，之前數(shù)據(jù)只能生命在各個(gè)系列中.

dataset可以單獨(dú)聲明數(shù)據(jù)

例子

option={...dataset:{source: [//第一行的數(shù)據(jù)默認(rèn)為維度名，第二行開始才是數(shù)據(jù)//如果想讓第一行就是數(shù)據(jù)，那么可以設(shè)置dataset.sourceHeader:false//默認(rèn)第一列映射到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的維度會(huì)自動(dòng)按列映射到series中，也可以設(shè)置//seriesLayoutBy：'row' 按行映射series:[{//seriesLayoutBy:'row'type:'bar'//可以直接使用encode指定x軸和y軸的數(shù)據(jù)encode:{x:'product',y:'2015'}},{type:'bar'}, {type:'bar'},]... }

encode支持的屬性：

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

transform

dataset.transform是echarts5開始支持的一種數(shù)據(jù)轉(zhuǎn)換的功能,

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

• 把數(shù)據(jù)分成多份用不同的餅圖展現(xiàn)。
• 進(jìn)行一些數(shù)據(jù)統(tǒng)計(jì)運(yùn)算，并展示結(jié)果。
• 用某些數(shù)據(jù)可視化算法處理數(shù)據(jù)，并展示結(jié)果。
• 數(shù)據(jù)排序。
• 去除或直選擇數(shù)據(jù)項(xiàng)。

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下可以設(shè)置多個(gè)規(guī)則,and/or/notconfig:{//dimension選擇維度//維度為Year，值=2011的數(shù)據(jù)and:[{dimension:'Year','=':2011}//維度為sales，值大于100的數(shù)據(jù){dimesion:'sales',gt:100}]//最后取交集},} }],series:[{type:'pie'},{type:'pie'},{type:'pie'},] }

常見的對(duì)象數(shù)組格式：

option={...dataset:{// 用 dimensions 指定了維度的順序。直角坐標(biāo)系中，// 默認(rèn)把第一個(gè)維度映射到 X 軸上，第二個(gè)維度映射到 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}]}... }

動(dòng)態(tài)排序

1.首先開啟圖表的實(shí)時(shí)排序

series:{...realTimesort:true... } //默認(rèn)升序 //降序可對(duì)具體的坐標(biāo)軸進(jìn)行inverse:true 的翻轉(zhuǎn)操作

2.設(shè)置圖表的動(dòng)畫時(shí)長(zhǎng)

option={...//初始圖表的動(dòng)畫時(shí)長(zhǎng)animationDuration:0,//更新圖表時(shí)動(dòng)畫時(shí)長(zhǎng)animationDurationUpdate:3000// 初始動(dòng)畫的緩效果 animationEasing: 'linear',animationEasingUpdate: 'linear',... }

3.設(shè)置x軸或y軸的動(dòng)畫時(shí)長(zhǎng)

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

4.定時(shí)更新數(shù)據(jù)

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

時(shí)間軸更新數(shù)據(jù)

時(shí)間軸使用需要多個(gè)option，用來實(shí)現(xiàn)切換。

1.首先配置baseOption和options

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

2.在baseOption中配置timeline

baseOption:{...timeline:{axisType: 'category',//是否自動(dòng)播放autoPlay: true,//播放時(shí)間間隔playInterval: 1000,//時(shí)間軸數(shù)據(jù)data: ['time1', 'time2', 'time3', 'time4', 'time5']}... }

極坐標(biāo)系

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

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

2.然后需要在series中生命用的是polar極坐標(biāo)系

series:{...//默認(rèn)為cartesian2d，也就是直角坐標(biāo)系，極坐標(biāo)系需要聲明coordinateSystem:'polar'//指定相應(yīng)的極坐標(biāo)組件porlarIndex:0... }

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。