1.橫向柱狀圖bar

①基本配置

<template><div class="com-container"><div class="com-chart" ref="seller_ref"></div> //ref更好的獲取dom</div> </template> <script> export default {data () {return {chartInstance: null, //圖表的數(shù)據(jù)allData: null // 服務(wù)器返回的數(shù)據(jù)}},mounted () {this.initChart() //初始化圖表數(shù)據(jù)this.getData() //獲取后端的數(shù)據(jù)},methods: {initChart () { //初始化圖表數(shù)據(jù)this.chartInstance = this.$echarts.init(this.$refs.seller_ref)},async getData () { //獲取后端的數(shù)據(jù)// http://127.0.0.1:8888/api/sellerconst { data: ret } = await this.$http.get('seller')console.log(ret)this.allData = retthis.updateChart()},updateChart () {const sellerNames = this.allData.map(item => {return item.name})const sellerValues = this.allData.map(item => {return item.value})const option = {xAxis: {type: 'value' //數(shù)值軸},yAxis: { type: 'category', //類(lèi)目軸 data: sellerNames},series: [ //數(shù)值軸對(duì)應(yīng)的數(shù)據(jù){type: 'bar', //代表是柱狀圖]}this.chartInstance.setOption(option)}} } </script> <style> </style>

②最大值markPoint、最小值markPoint、平均值markLine

series: [ //數(shù)值軸對(duì)應(yīng)的數(shù)據(jù){type: 'bar', //代表是柱狀圖markPoint:{ //最大值 最小值data:[{type:"max",name:"最大值"},{type:"min",name:"最小值"}]}markLine:{ //平均值data:[type:"average",name:"平均值"]}data: sellerValues //sellerValues 存放數(shù)據(jù)的數(shù)組}]

③動(dòng)態(tài)刷新、分頁(yè) 效果

data () {return {currentPage: 1, // 當(dāng)前顯示的頁(yè)數(shù) 1totalPage: 0, // 一共有多少頁(yè) 2timerId: null // 定時(shí)器的標(biāo)識(shí) 3}},destroyed () {// 在組件銷(xiāo)毀的時(shí)候, 需要將監(jiān)聽(tīng)器取消掉clearInterval(this.timerId)},methods: {initChart () {// 對(duì)圖表對(duì)象進(jìn)行鼠標(biāo)事件的監(jiān)聽(tīng)this.chartInstance.on('mouseover', () => {clearInterval(this.timerId) // 移入關(guān)閉定時(shí)器})this.chartInstance.on('mouseout', () => {this.startInterval() // 移出開(kāi)啟定時(shí)器})},async getData () {// http://127.0.0.1:8888/api/sellerconst { data: ret } = await this.$http.get('seller')console.log(ret)this.allData = ret// 從小到大的排序this.allData.sort((a, b) => {return a.value - b.value // 從小到大的排序})// 每5個(gè)元素顯示一頁(yè)this.totalPage = this.allData.length % 5 === 0 ? this.allData.length / 5: this.allData.length / 5 + 1this.updateChart()this.startInterval() // 開(kāi)啟定時(shí)器},updateChart () {const start = (this.currentPage - 1) * 5const end = this.currentPage * 5const showData = this.allData.slice(start, end)const sellerNames = showData.map(item => {return item.name})const sellerValues = showData.map(item => {return item.value})const option = {xAxis: {type: 'value'},yAxis: {type: 'category',data: sellerNames},series: [{type: 'bar',data: sellerValues}]}this.chartInstance.setOption(option)},// 開(kāi)啟定時(shí)器startInterval () {if (this.timerId) {clearInterval(this.timerId)}this.timerId = setInterval(() => {this.currentPage++if (this.currentPage > this.totalPage) {this.currentPage = 1}this.updateChart()}, 3000)}}

?④圖表標(biāo)題title 、網(wǎng)格grid：

updateChart () {const option = {title: { //設(shè)置標(biāo)題text: "▎商家銷(xiāo)售統(tǒng)計(jì)",textStyle: { //標(biāo)題文字樣式fontSize: 48,color:"red"},borderWidth:5, //標(biāo)題邊框?qū)挾萣orderColor:"blue", //標(biāo)題邊框顏色borderRadius:5, //標(biāo)題邊框圓角left: 20, //標(biāo)題位置top: 20 //標(biāo)題位置},grid: { //設(shè)置坐標(biāo)軸位置show:true, //顯示網(wǎng)格borderWidth:10,borderColor:"red",width:120,height:120,top: "20%",left: "3%",right: "6%",bottom: "3%",containLabel: true // 距離是包含坐標(biāo)軸上的文字},} }

?⑤工具欄toolbox：區(qū)域縮放dataZoom

//導(dǎo)出圖片，數(shù)據(jù)視圖，動(dòng)態(tài)類(lèi)型切換，數(shù)據(jù)區(qū)域縮放，重置const option = {toolbox:{ //工具欄feature:{saveAsImage:{}, //導(dǎo)出圖片dataView:{} , //數(shù)據(jù)視圖magicType:{ //動(dòng)態(tài)類(lèi)型切換type:["bar","line"]} , dataZoom:{} , //數(shù)據(jù)區(qū)域縮放restore:{} , //重置}},}

⑥圖例legend：

const option = {legend:{data:["語(yǔ)文","數(shù)學(xué)"]}series:[{ name:"語(yǔ)文",type:"bar",data:dataArr1},{ name:"數(shù)學(xué)",type:"bar",data:dataArr2}] }

⑦柱狀條目配置lable、tooltip:

series: [{type: 'bar',data: sellerValues,barWidth: 66, // 柱狀條目寬度label: { // 柱狀條目數(shù)值顯示show: true,rotate:60, //數(shù)值顯示旋轉(zhuǎn)效果position: 'right', //數(shù)值顯示位置textStyle: { //數(shù)值文字顯示樣式color: 'white'}},tooltip: { // 柱狀條目背景樣式trigger: 'axis', //"item" 指鼠標(biāo)移入時(shí)才顯示//triggerOn:"click"/"mouseover" 鼠標(biāo)點(diǎn)擊才顯示//formatter:"的{c}" 格式化顯示內(nèi)容//formatter:function(arg){ console.log(arg) return arg[0].name }axisPointer: {type: 'line',z: 0,lineStyle: {width:66,color: '#2D3443'}}},itemStyle: { // 柱狀條目barBorderRadius: [0, 33, 33, 0], // 柱狀條目圓角// 指明顏色漸變的方向 0, 0, 1, 0, = x1,y1,x2,y2 (x1,y1) 指向(x2,y2)// 指明不同百分比之下顏色的值color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [// 百分之0狀態(tài)之下的顏色值{offset: 0,color: '#5052EE'},// 百分之100狀態(tài)之下的顏色值{offset: 1,color: '#AB6EE5'}])}}]

⑧優(yōu)化? 拆分option內(nèi)容 ：

①初始化的配置initOptionconst initOption = {title: {text: '▎商家銷(xiāo)售統(tǒng)計(jì)',left: 20,top: 20},grid: { //網(wǎng)格//show : true //網(wǎng)格顯示//width:300,//網(wǎng)格寬度//height:300,//網(wǎng)格高度//borderWidth:10, //網(wǎng)格邊框?qū)挾?/borderColor:"red", //網(wǎng)格邊框顏色top: '20%', //網(wǎng)格位置left: '3%',right: '6%',bottom: '3%',containLabel: true // 距離是包含坐標(biāo)軸上的文字},xAxis: {type: 'value'//position:"top"/"bottom" //x軸的位置},yAxis: {type: 'category'//position:"left"/"right" //y軸的位置},tooltip: {trigger: 'axis',axisPointer: {type: 'line',z: 0,lineStyle: {color: '#2D3443'}}},series: [{type: 'bar',label: {show: true,position: 'right',textStyle: {color: 'white'}},itemStyle: {// 指明顏色漸變的方向// 指明不同百分比之下顏色的值color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [// 百分之0狀態(tài)之下的顏色值{offset: 0,color: '#5052EE'},// 百分之100狀態(tài)之下的顏色值{offset: 1,color: '#AB6EE5'}])}}]}this.chartInstance.setOption(initOption)②獲取數(shù)據(jù)之后的配置dataOptionconst dataOption = {yAxis: {data: sellerNames},series: [{data: sellerValues}]}this.chartInstance.setOption(dataOption)③分辨率適配的配置adapterOptionconst adapterOption = {title: {textStyle: {fontSize: titleFontSize}},tooltip: {axisPointer: {lineStyle: {width: titleFontSize}}},series: [{barWidth: titleFontSize,itemStyle: {barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0]}}]}this.chartInstance.setOption(adapterOption)

⑨?分辨率適配resize：

mounted () {window.addEventListener('resize', this.screenAdapter)// 首次進(jìn)入 在頁(yè)面加載完成的時(shí)候, 主動(dòng)進(jìn)行屏幕的適配this.screenAdapter()},destroyed () {clearInterval(this.timerId)// 在組件銷(xiāo)毀的時(shí)候, 需要將監(jiān)聽(tīng)器取消掉window.removeEventListener('resize', this.screenAdapter)},methods: {// 當(dāng)瀏覽器的大小發(fā)生變化的時(shí)候, 會(huì)調(diào)用的方法, 來(lái)完成屏幕的適配screenAdapter () {// console.log(this.$refs.seller_ref.offsetWidth) 屏幕大小const titleFontSize = (this.$refs.seller_ref.offsetWidth / 100) * 3.6// 和分辨率大小相關(guān)的配置項(xiàng)const adapterOption = {title: {textStyle: {fontSize: titleFontSize}},tooltip: {axisPointer: {lineStyle: {width: titleFontSize}}},series: [{barWidth: titleFontSize,itemStyle: {barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0]}}]}this.chartInstance.setOption(adapterOption)// 手動(dòng)的調(diào)用圖表對(duì)象的resize 才能產(chǎn)生效果this.chartInstance.resize()} }

2.折線圖line

①基本配置

標(biāo)注區(qū)間markArea、線條平滑樣式smooth、線條風(fēng)格lineStyle、填充風(fēng)格areaStyle、緊挨Y軸邊緣boundaryGap、縮放scale:

const Option = {xAxis: {data: timeArr,boundaryGap:false //折線緊挨Y軸邊緣 沒(méi)有間隔},yAxis: {type: "value",scale :true //折線縮放，數(shù)值軸不從0開(kāi)始},series: [{markArea: { //標(biāo)注區(qū)間data: [[{ xAxis: "1月" }, { xAxis: "2月" }], //開(kāi)始值~結(jié)束值[{ xAxis: "7月" }, { xAxis: "8月" }]]},smooth: true, //折線平滑樣式lineStyle: { //折線的風(fēng)格：顏色、寬度、線的樣式color: '#5470C6',width: 5,type: "dashed" //dashed虛線 dotted點(diǎn)線 solid實(shí)線},areaStyle: { //填充風(fēng)格color: "pink" //填充顏色},}] }

②折線堆疊圖stack、堆疊風(fēng)格areaStyle：

series: [{name: 'Line 1',type: 'line',stack: 'Total', //① 堆疊圖 stack值相同areaStyle: { //堆疊風(fēng)格opacity: 0.8,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgb(255, 0, 135)'},{offset: 1,color: 'rgb(135, 0, 157)'}])},data: [220, 402, 231, 134, 190, 230, 120]},{name: 'Line 2',type: 'line',stack: 'Total', //① 堆疊圖 stack值相同areaStyle: {opacity: 0.8,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgb(255, 191, 0)'},{offset: 1,color: 'rgb(224, 62, 76)'}])},data: [220, 302, 181, 234, 210, 290, 150]}]

3.散點(diǎn)圖scatter

①氣泡散點(diǎn)圖：散點(diǎn)大小symbolSze、散點(diǎn)顏色itemStyle

option = {xAxis: {type: 'value', //注意scale: true //縮放 擺脫0值比例},yAxis: {type: 'value', //注意scale: true //縮放 擺脫0值比例},series: [{type: 'scatter', //氣泡散點(diǎn)圖data: [ //二維數(shù)組格式[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],[170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],[172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0], ],symbolSize: function (val) { //散點(diǎn)大小console.log(val) //散點(diǎn)信息return val[2] * 2;},itemStyle: {color: function (val) { //散點(diǎn)樣式console.log(val) // 散點(diǎn)信息return "red"},},}] };

②漣漪散點(diǎn)圖effectScatter:? 漣漪出現(xiàn)的時(shí)機(jī)showEffectOn、?漣漪效果影響范圍rippleEffect

option = {xAxis: {scale: true},yAxis: {scale: true},series: [{type: 'effectScatter', //漣漪散點(diǎn)圖showEffectOn:"emphasis" //漣漪出現(xiàn)的時(shí)機(jī) render自動(dòng)擁有效果 emphasis鼠標(biāo)移上擁有效果rippleEffect:{ //漣漪效果影響范圍scale:5 //漣漪效果縮放比例},symbolSize: 20,data: [[172.7, 105.2],[153.4, 42]]}, ]

③x軸y軸顯示位置position:

xAxis: {type: 'value',position:"top" / "bottom" }, yAxis: {type: 'category',position:"right" / "left" },

④區(qū)域縮放dataZoom:

const option = {dataZoom:[{ type:"silder" / "inside" , //縮放類(lèi)型：silder滑塊xAxisIndex : 0 //作用于X軸},{ type:"silder" / "inside" ,yAxisIndex : 0 , start:0,end:50 //開(kāi)始區(qū)域~結(jié)束區(qū)域 指明初始狀態(tài)的縮放情況},]}

4.餅圖pie

①基本設(shè)置：數(shù)據(jù)

var pieData = [{name: '淘寶', //name屬性value: 11231 //value屬性},{name: '京東',value: 22673},{name: '唯品會(huì)',value: 6123},]var option = {series: [{type: 'pie',data: pieData}]}

②文字顯示label

series: [label: { // 餅圖文字的顯示show: true, // 顯示文字formatter: function(arg){ // 決定文字顯示的內(nèi)容// console.log(arg)return arg.name + '平臺(tái)' + arg.value + '元\n' + arg.percent + '%'}}, ]

③餅圖的半徑

series: [ {// radius: 20 // 餅圖的半徑// radius: '20%' // 百分比參照的是容器的寬度和高度中較小的那一部分的一半來(lái)進(jìn)行百分比設(shè)置// radius: ['50%', '75%'] //圓環(huán) ： 第0個(gè)元素代表的是內(nèi)圓的半徑 第1個(gè)元素外圓的半徑roseType: 'radius', // 南丁格爾圖：餅圖的每一個(gè)區(qū)域的半徑是不同的// selectedMode: 'single', // 選中的效果,能夠?qū)⑦x中的區(qū)域偏離圓點(diǎn)一小段距離selectedMode: 'multiple', // 選中的效果,能夠?qū)⑦x中的多個(gè)區(qū)域偏離圓點(diǎn)一小段距離selectedOffset: 30 // 選中偏移量} ]

5.地圖map

①基本配置：允許縮放以及拖動(dòng)roam、?展示標(biāo)簽label、初始化的縮放比例zoom、地圖中心點(diǎn)的坐標(biāo)center

<script src="lib/echarts.min.js"></script> <script src="lib/jquery.min.js"></script> <body><div style="width: 600px;height:400px;border: 1px solid #f00"></div><script>//1. ECharts最基本的代碼結(jié)構(gòu)//2. 準(zhǔn)備中國(guó)地圖的矢量數(shù)據(jù)//3. 使用Ajax獲取矢量地圖數(shù)據(jù)//4. 在Ajax的回調(diào)函數(shù)中注冊(cè)地圖矢量數(shù)據(jù) echarts.registerMap('chinaMap', 矢量地圖數(shù)據(jù))//5. 配置geo的type為'map', map為'chinaMap' var mCharts = echarts.init(document.querySelector("div"))$.get('json/map/china.json', function (ret) {// ret 就是中國(guó)的各個(gè)省份的矢量地圖數(shù)據(jù)// console.log(ret)echarts.registerMap('chinaMap', ret)var option = {geo: {type: 'map',map: 'chinaMap', // chinaMap需要和registerMap中的第一個(gè)參數(shù)保持一致roam: true, // 設(shè)置允許縮放以及拖動(dòng)的效果label: {show: true // 展示標(biāo)簽},zoom: 1, // 設(shè)置初始化的縮放比例center: [87.617733, 43.792818] // 設(shè)置地圖中心點(diǎn)的坐標(biāo)}}mCharts.setOption(option)})</script> </body>

②顯示某個(gè)省份的數(shù)據(jù)：如安徽anhui.json、顯示省的 每個(gè)市l(wèi)abel

//1. 加載安徽省地圖的矢量數(shù)據(jù)//2. 在Ajax的回調(diào)函數(shù)中注冊(cè)地圖矢量數(shù)據(jù) echarts.registerMap('anhui', 矢量地圖數(shù)據(jù))//3. 配置geo的type為'map', map為'anhui' //4. 通過(guò)zoom調(diào)整縮放比例//5. 通過(guò)center調(diào)整中心點(diǎn) var mCharts = echarts.init(document.querySelector("div"))$.get('json/map/anhui.json', function (ret) {console.log(ret)echarts.registerMap('anhui', ret)var option = {geo: {type: 'map',map: 'anhui',zoom: 1.2,label: { //顯示省的 每個(gè)市show: true},center: [116.507676, 31.752889] // 這個(gè)坐標(biāo)值, 我們是可以通過(guò)地圖矢量數(shù)據(jù)獲取到的}}mCharts.setOption(option)})

③不同地區(qū)顯示不同的顏色：對(duì)地圖的數(shù)據(jù)過(guò)濾篩選visualMap

//1. 顯示基本的中國(guó)地圖//2. 將空氣質(zhì)量的數(shù)據(jù)設(shè)置給series下的對(duì)象//3. 將series下的數(shù)據(jù)和geo關(guān)聯(lián)起來(lái)//4. 配置visualMapvar airData = [{ name: '北京', value: 39.92 },{ name: '天津', value: 39.13 },{ name: '上海', value: 31.22 },{ name: '重慶', value: 66 },{ name: '河北', value: 147 },{ name: '河南', value: 113 } ........]var mCharts = echarts.init(document.querySelector("div"))$.get('json/map/china.json', function (ret) {// ret 就是中國(guó)的各個(gè)省份的矢量地圖數(shù)據(jù)console.log(ret)echarts.registerMap('chinaMap', ret)var option = {geo: {type: 'map',map: 'chinaMap', // chinaMap需要和registerMap中的第一個(gè)參數(shù)保持一致roam: true, // 設(shè)置允許縮放以及拖動(dòng)的效果label: {show: true // 展示標(biāo)簽}},series: [ {data: airData, //將空氣質(zhì)量的數(shù)據(jù)設(shè)置給series下的對(duì)象geoIndex: 0, // 將空氣質(zhì)量的數(shù)據(jù)和第0個(gè)geo配置關(guān)聯(lián)在一起type: 'map'}],visualMap: { //對(duì)地圖的數(shù)據(jù)過(guò)濾篩選min: 0, //最小值max: 300, //最大值inRange: { //顏色漸變color: ['white', 'red'] // 控制顏色漸變的范圍},calculable: true // 出現(xiàn)滑塊}}mCharts.setOption(option)})

④地圖和散點(diǎn)圖結(jié)合

//1. 給series下增加一個(gè)新的對(duì)象//2. 準(zhǔn)備數(shù)據(jù)散點(diǎn)數(shù)據(jù) , 配置給series下的另外一個(gè)對(duì)象//3. 配置series下的新對(duì)象的type值為effectScatter//4. 指明散點(diǎn)圖的坐標(biāo)系統(tǒng)為geo//5. 調(diào)整漣漪動(dòng)畫(huà)效果var airData = [ //地圖的數(shù)據(jù){ name: '北京', value: 39.92 },{ name: '天津', value: 39.13 },{ name: '上海', value: 31.22 },{ name: '重慶', value: 66 } ............. ]var scatterData = [ //散點(diǎn)漣漪動(dòng)畫(huà)的坐標(biāo)數(shù)據(jù){ value: [117.283042, 31.86119] }]var mCharts = echarts.init(document.querySelector("div"))$.get('json/map/china.json', function (ret) {// ret 就是中國(guó)的各個(gè)省份的矢量地圖數(shù)據(jù)console.log(ret)echarts.registerMap('chinaMap', ret)var option = {geo: {type: 'map',map: 'chinaMap', // chinaMap需要和registerMap中的第一個(gè)參數(shù)保持一致roam: true, // 設(shè)置允許縮放以及拖動(dòng)的效果label: {show: true // 展示標(biāo)簽}},series: [{data: airData,geoIndex: 0, // 將空氣質(zhì)量的數(shù)據(jù)和第0個(gè)geo配置關(guān)聯(lián)在一起type: 'map'},{data: scatterData, // 配置散點(diǎn)的坐標(biāo)數(shù)據(jù)type: 'effectScatter', // 漣漪動(dòng)畫(huà)coordinateSystem: 'geo', // 指明散點(diǎn)使用的坐標(biāo)系統(tǒng) geo的坐標(biāo)系統(tǒng)rippleEffect: { // 設(shè)置漣漪動(dòng)畫(huà)的效果scale: 10 // 設(shè)置漣漪動(dòng)畫(huà)的縮放比例}}],visualMap: {min: 0,max: 300,inRange: {color: ['white', 'red'] // 控制顏色漸變的范圍},calculable: true // 出現(xiàn)滑塊}}mCharts.setOption(option)})

6.雷達(dá)圖radar

①基本配置

//1. ECharts最基本的代碼結(jié)構(gòu)//2. 定義各個(gè)維度的最大值, 通過(guò)radar屬性配置// 易用性,功能,拍照,跑分,續(xù)航, 每個(gè)維度的最大值都是100//3. 準(zhǔn)備產(chǎn)品數(shù)據(jù), 設(shè)置給series下的data// 華為手機(jī)1: 80, 90, 80, 82, 90// 中興手機(jī)1: 70, 82, 75, 70, 78//4. 將type的值設(shè)置為radarvar mCharts = echarts.init(document.querySelector("div"))var dataMax = [ // 各個(gè)維度的最大值{name: '易用性',max: 100},{name: '功能',max: 100},{name: '拍照',max: 100},{name: '跑分',max: 100},{name: '續(xù)航',max: 100}]var option = {radar: { indicator: dataMax, // 配置各個(gè)維度的最大值shape: 'polygon' // 配置雷達(dá)圖最外層的圖形 circle圓形 polygon多邊形},series: [{type: 'radar', // radar 此圖表時(shí)一個(gè)雷達(dá)圖label: { // 設(shè)置標(biāo)簽的樣式show: true // 顯示數(shù)值},areaStyle: {}, // 將每一個(gè)產(chǎn)品的雷達(dá)圖形成陰影的面積data: [{name: '華為手機(jī)1',value: [80, 90, 80, 82, 90]},{name: '中興手機(jī)1',value: [70, 82, 75, 70, 78]}]}]}mCharts.setOption(option)

7.儀表盤(pán)gauge

①基本設(shè)置

//1. ECharts最基本的代碼結(jié)構(gòu)//2. 準(zhǔn)備數(shù)據(jù), 設(shè)置給series下的data//3. 將type的值設(shè)置為gaugevar mCharts = echarts.init(document.querySelector("div"))var option = {series: [{type: 'gauge',min: 50 // min max 控制儀表盤(pán)數(shù)值范圍data: [{ // 每一個(gè)對(duì)象就代表一個(gè)指針value: 97,itemStyle: { // 指針的樣式color: 'pink' // 指針的顏色}}, {value: 85,itemStyle: {color: 'green'}}],}]}mCharts.setOption(option)

總結(jié)

以上是生活随笔為你收集整理的数据可视化大屏-Vue-1图表基本配置的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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