1、柱狀圖：

?

1、需要?jiǎng)討B(tài)加載的參數(shù)是x軸以及柱狀圖的數(shù)值，legendData和seriesData。demo使用是可以直接寫(xiě)死參數(shù)，在執(zhí)行this.initChart()方法即可。具體代碼可以參數(shù)以下code.

<!--門(mén)禁卡開(kāi)門(mén)統(tǒng)計(jì)--> <template><div class="openCardCountEle" style="height: 90%;width: 100%;padding: 4px;" v-loading="isLoading"><div style="width: 100%;height: 100%;z-index: 0"><div id="openCardCountEleID"></div></div></div> </template><script>import echarts from 'echarts';import {getFileDetail30DaysTime} from 'api/viasadmin/arcgisMap/IntelDigCtrl';import {openCardCount} from 'api/dashboard';export default {name: "openCardCountEle",props:['curDAItem'],data() {return {chart: null,id: 'openCardCountEleID',isLoading: false,color: ['#ff8463','#9bca62','#2ec7c9','#b6a2de','#5ab1ef','#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa','#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050','#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'],legendData: ['0:00-2:00', '2:00-4:00', '4:00-6:00', '6:00-8:00', '8:00-10:00', '10:00-12:00','12:00-14:00','14:00-16:00','16:00-18:00','18:00-20:00','20:00-22:00','22:00-24:00'],seriesData:[],// seriesData:[10, 52, 200, 334, 390, 330, 220], };},beforeDestroy() {if (!this.chart) {return false;}this.chart.dispose();this.chart = null;},beforeCreate(){},created(){},mounted() {this.$nextTick(() => {this.getList();// this.initChart(); });},methods: {getList(){//獲取上次的勾選記錄this.isLoading = true;const param ={archivesCode:this.curDAItem.archivesCode,topNum:10}getFileDetail30DaysTime(param).then(rsp=>{this.isLoading = false;if(rsp.status == 200 && rsp.data){this.seriesData = rsp.data;} else {this.seriesData =[];}this.initChart();})},initChart() {$("#openCardCountEleID").width($(".openCardCountEle").width());$("#openCardCountEleID").height($(".openCardCountEle").height());this.chart = echarts.init(document.getElementById(this.id));this.chart.setOption({color: this.color,grid: {left: '80px',right: '50px',top: '70px',bottom:'30px',},legend: {data: ['感知次數(shù)'],top: 20,textStyle:{color:'#E69142', fontWeight:'bold'},},title: {text: '設(shè)備感知次數(shù)',textStyle:{fontSize: 16,fontWeight: "normal",color: "#32DBEF"}},tooltip: {trigger: 'axis',showDelay:200,},xAxis: {type: 'category',data: this.legendData,axisLine: {lineStyle: {color: '#fff',width: 1,//這里是為了突出顯示加上的 },},splitLine: {show: false,lineStyle:{color: ['#2E65B1'], width: 1, type: 'solid'}}},yAxis : [{axisLine: {lineStyle: {color: '#fff', width: 1}},type : 'value',splitLine: {show: true, lineStyle:{color: ['#2E65B1'], width: 1, type: 'solid'}},axisLabel: {show: true, textStyle: {color: '#fff'}}}],series : [{name:'感知次數(shù)',type:'bar',data:this.seriesData,barMaxWidth: '30',itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0,color: "#FFCF68" // 0% 處的顏色 },{offset: 0.5,color: "#ff9333" // 100% 處的顏色 }, {offset: 1,color: "#ff9333" // 100% 處的顏色}], false)}}}]},true);}}} </script><style scoped></style> View Code

?

2、折現(xiàn)圖。折線過(guò)多，legend需要支持分頁(yè)。

數(shù)據(jù)接口格式：

?

<!--視頻門(mén)禁--> <template><div class="videoDoorCtrl" v-loading="isLoading"><div class="videoDoorTitle"><span class="title">視頻門(mén)禁進(jìn)出數(shù)據(jù)統(tǒng)計(jì)</span><span class="mapSelectBox"><el-select class="selectCls" v-model="regionTypeVal" multiple collapse-tags @change="outInTypeChange"><el-option v-for="item in AreaOptionList" :key="item.value" :label="item.label" :value="item.value"> </el-option></el-select></span></div><div style="width: 100%;height: 100%;z-index: 0"><div :class="className" id="videoDoorID"></div></div></div> </template><script>import echarts from 'echarts';import {doorCount} from 'api/viasadmin/arcgisMap/arcgisMap';import {residentialAreaDoorList} from '../../../api/com';export default {name: "videoDoorCtrl",props: {className: { type: String, default: 'chart'},id: { type: String, default: 'videoDoorID' },},data() {return {chart: null,regionTypeVal:[],outInTypeOpt:[{value:'1',label:'出門(mén)'},{value:'2',label:'入門(mén)'}],isLoading:false,color:['#ff8463','#9bca62','#2ec7c9','#b6a2de','#5ab1ef','#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa','#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050','#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'],legendData:[],seriesData:[],selected:{},AreaOptionList:[],param : {esList:[], // 空的話默認(rèn)查詢?nèi)?/span>startDate:'', // 默認(rèn)當(dāng)天endDate:''}};},beforeDestroy() {if (!this.chart) {return false;}this.chart.dispose();this.chart = null;},beforeCreate(){},created(){this.getAreaList();},methods: {getAreaList(){const paramList = {};let getLastSet=[];if(window.localStorage.getItem("mapHomeVideoDoorSelectList")){getLastSet = JSON.parse(window.localStorage.getItem("mapHomeVideoDoorSelectList"));}//獲取上次的勾選記錄this.isLoading = true;residentialAreaDoorList(paramList).then(rsp =>{this.isLoading = false;if(rsp.status == 200){for(let i = 0;i<rsp.result.length;i++){this.AreaOptionList.push({'value': rsp.result[i].value, 'label': rsp.result[i].label});}if(getLastSet){for(let i =0;i<getLastSet.length;i++){this.regionTypeVal.push(getLastSet[i].id);this.param.esList.push({id:getLastSet[i].id})}}} else {this.AreaOptionList = [];}this.getChartData();})},getChartData(){doorCount(this.param).then(rsp => {this.legendData = [];this.seriesData= [];this.selected= [];if (rsp.status == 200) {for (let i = 0; i < rsp.data.list.length; i++) {this.legendData.push(rsp.data.list[i].esName);this.seriesData.push({name: rsp.data.list[i].esName,type: 'line',stack: '總量',data: rsp.data.list[i].list})this.selected[rsp.data.list[i].esName] = i;}} else{this.seriesData = [];this.legendData = [];this.selected = {};}this.initChart();})},initChart() {// $("#videoDoorID").width($(".videoDoorCtrl").width());// $("#videoDoorID").height($(".videoDoorCtrl").height());$("#videoDoorID").width($(window).width() * 0.20); // 和首頁(yè)的initPage方法進(jìn)行對(duì)應(yīng)。$("#videoDoorID").height(($(window).height()-80)*0.25);this.chart = echarts.init(document.getElementById(this.id));this.chart.setOption({color: this.color,grid: {left: '50px',right: '30px',top: '50px',bottom:'80px'},legend: {type: 'scroll',orient: 'horizontal',//verticalright: 10,bottom: 20,data: this.legendData,textStyle:{color:'#E69142',fontWeight:'bold'},pageTextStyle:{ //圖例頁(yè)信息的文字樣式。color:'#fff'},animation:true,selected: this.selected,pageIconColor: '#00FFFF', //翻頁(yè)按鈕的顏色。pageIconInactiveColor:'#ADE5E5', // 翻頁(yè)按鈕不激活時(shí)（即翻頁(yè)到頭時(shí)）的顏色 },tooltip: {trigger: 'axis',axisPointer: {type: 'line'},showDelay:200,confine :true, //是否將 tooltip 框限制在圖表的區(qū)域內(nèi) },xAxis: {type: 'category',boundaryGap: false,data: ['0','1:00','2:00','3:00','4:00','5:00','6:00','7:00','8:00','9:00','10:00','11:00','12:00', '13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00','24:00'],axisLine: {lineStyle: {color: '#fff',width: 1,//這里是為了突出顯示加上的 }},splitLine: {show: false,lineStyle:{color: ['#666'], width: 1, type: 'solid'}}},yAxis: {type: 'value',axisLine: {lineStyle: {color: '#fff', width: 1}},splitLine: {show: true,lineStyle:{color: ['#666'], width: 1, type: 'solid'}},axisLabel: {show: true, textStyle: {color: '#fff'}}},series: this.seriesData},true);},outInTypeChange(val){this.regionTypeVal = val;this.param.esList = [];for(let i = 0;i<this.regionTypeVal.length;i++){this.param.esList.push({id:this.regionTypeVal[i]});}// 把勾選的結(jié)果保存到localstroagewindow.localStorage.setItem("mapHomeVideoDoorSelectList",JSON.stringify(this.param.esList));this.getChartData();}}} </script><style scoped>.videoDoorCtrl {color: #333;padding: 5px;width: 100%;height: 100%;position: relative;}.videoDoorTitle {position: absolute;top: 5px;z-index: 9;width: 100%;}.selectCls {width: 50%;border-radius: 6px;float: right;margin-right: 10px;}.videoDoorTitle .title{color: #ffffff;font-weight: 600;/*font-size: 15px;*/font-size: 0.18rem;margin-top: 8px;display: inline-block;}</style> View Code

?

3、餅狀圖。　

此處是2個(gè)冰柱圖進(jìn)行輪播，沒(méi)有截圖出圖二。

數(shù)據(jù)格式如下：

?

1 <!--轄區(qū)基礎(chǔ)數(shù)據(jù)--> 2 <template> 3 <div style="margin: 2%;height: 100%;width: 100%;" class="communityPolice"> 4 <el-carousel height="100%" :autoplay=false :interval = 1000*30> 5 <el-carousel-item> 6 <el-col :span="4"> 7 <span style="display: inline-block;text-align: center;width: 100%;">今日告警<br/>總數(shù)：</span> 8 <span class="totalCls"> 9 {{policeData.totalCount}} 10 </span> 11 </el-col> 12 <el-col :span="20"> 13 <div class="chartsOutter" style="width: 98%;height: 100%;"> 14 <div id="policID" style="width: 100%;"></div> 15 </div> 16 </el-col> 17 </el-carousel-item> 18 <el-carousel-item> 19 <el-col :span="4"> 20 <span style="display: inline-block;text-align: center;width: 100%;">警情總數(shù)：</span> 21 <span class="totalCls"> 22 {{warnDetilData.totalCount}} 23 </span> 24 </el-col> 25 <el-col :span="20"> 26 <div class="chartsOutter" style="width: 98%;height: 100%;"> 27 <div id="warnDetilID" style="width: 100%;"></div> 28 </div> 29 </el-col> 30 </el-carousel-item> 31 </el-carousel> 32 </div> 33 </template> 34 35 <script> 36 import {communityCount,communityXQCount,communityXQWarnCount} from 'api/viasadmin/arcgisMap/arcgisMap'; 37 import {filterFieldFun,curTimeFun} from 'filters/index'; 38 import { mapGetters } from 'vuex'; 39 import echarts from 'echarts'; 40 41 export default { 42 name: "communityPolice", 43 data() { 44 return { 45 esListParam:[], 46 color:[ 47 '#3CA45C','#EB6F13','#C9C438','#5BB7EC','#D882C3', 48 '#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa', 49 '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050', 50 '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089' 51 ], 52 listQueryWarn:{ 53 startTime:'', 54 endTime:'', 55 esList:[] 56 }, 57 warnDetilData:{ 58 totalCount:'', 59 seriesData:[], 60 legendData:[], 61 }, 62 listQueryPolice:{ 63 endDate:'', 64 startDate:'', 65 esList:[] 66 }, 67 policeData:{ 68 totalCount:'', 69 seriesData:[], 70 legendData:[], 71 } 72 } 73 }, 74 computed: { 75 ...mapGetters([ 'mapGlobalCommunityIDGetter']) 76 }, 77 watch: { 78 // 監(jiān)聽(tīng)所選社區(qū)數(shù)據(jù)變化 79 mapGlobalCommunityIDGetter(val) { 80 this.listQueryPolice.esList = val; 81 this.getPoliceChartData(); 82 }, 83 }, 84 created() { 85 let timeTodayStart = curTimeFun('1','-')+' 00:00:00'; 86 let timeTodayEnd = curTimeFun('1','-')+' 23:59:59'; 87 this.listQueryPolice.startDate = timeTodayStart; 88 this.listQueryPolice.endDate = timeTodayEnd; 89 this.listQueryWarn.startTime = timeTodayStart; 90 this.listQueryWarn.endTime = timeTodayEnd; 91 }, 92 mounted() { 93 this.$nextTick(() => { 94 this.listQueryPolice.esList = this.$store.getters.mapGlobalCommunityIDGetter; 95 this.getPoliceChartData(); 96 this.getWarnDetilChartData(); 97 }); 98 }, 99 methods: { 100 getWarnDetilChartData(){ // 警情總數(shù) 101 communityXQWarnCount(this.listQueryWarn).then(rsp=>{ 102 if(rsp.status == 200){ 103 let total= 0; 104 this.warnDetilData.legendData = []; 105 this.warnDetilData.seriesData = []; 106 for(let i = 0;i<rsp.data.length;i++){ 107 total +=rsp.data[i].policeCaseNum; 108 this.warnDetilData.legendData.push(rsp.data[i].policeCaseType); 109 this.warnDetilData.seriesData.push({ 110 value:rsp.data[i].policeCaseNum, 111 name:rsp.data[i].policeCaseType 112 }) 113 } 114 this.warnDetilData.totalCount = total; 115 this.initWainDetilChart(); 116 } 117 }) 118 }, 119 initWainDetilChart() { // 警情總數(shù) 120 $("#warnDetilID").width($(window).width() * 0.20*0.9); // 和首頁(yè)的initPage方法進(jìn)行對(duì)應(yīng)。 121 $("#warnDetilID").height(($(window).height()-80)*0.13); 122 this.chart = echarts.init(document.getElementById("warnDetilID")); 123 this.chart.setOption({ 124 color: this.color, 125 tooltip : {trigger: 'item', formatter: "{a} <br/> : {c} (ozvdkddzhkzd%)"}, 126 grid: {top: '0px', bottom:'80px', right:'10px'}, 127 legend: { 128 orient: 'vertical', 129 type: 'scroll', 130 left: 'right', 131 icon:'circle', 132 right: 30, 133 pageTextStyle:{color:'#fff'}, //圖例頁(yè)信息的文字樣式。 134 textStyle:{color:'#fff',}, 135 animation:true, 136 data: this.warnDetilData.legendData, 137 selected: this.policeData.legendData, 138 pageIconColor: '#00FFFF', //翻頁(yè)按鈕的顏色。 139 pageIconInactiveColor:'#ADE5E5', // 翻頁(yè)按鈕不激活時(shí)（即翻頁(yè)到頭時(shí)）的顏色 140 }, 141 series : [{ 142 name: '警情總數(shù)', 143 type: 'pie', 144 radius : '38%', 145 center: ['35%', '40%'], 146 data: this.warnDetilData.seriesData, 147 itemStyle: {emphasis: {shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)'}}, 148 label:{ 149 normal:{ 150 formatter: "（{c}個(gè)）" 151 } 152 } 153 }] 154 },true); 155 }, 156 getPoliceChartData(){ // 警情告警 157 communityXQCount(this.listQueryPolice).then(rsp=>{ 158 if(rsp.status == 200){ 159 this.policeData.totalCount = rsp.data.totalCount; 160 this.policeData.legendData = []; 161 this.policeData.seriesData = []; 162 for(let i = 0;i<rsp.data.list.length;i++){ 163 this.policeData.legendData.push(filterFieldFun(rsp.data.list[i].alarmType,'alarmTypeGetter')); 164 this.policeData.seriesData.push({ 165 value:rsp.data.list[i].alarmCount, 166 name:filterFieldFun(rsp.data.list[i].alarmType,'alarmTypeGetter') 167 }) 168 } 169 this.initPolicChart(); 170 } 171 }) 172 }, 173 initPolicChart() { // 今日告警 174 175 $("#policID").width($(window).width() * 0.20*0.9); // 和首頁(yè)的initPage方法進(jìn)行對(duì)應(yīng)。 176 $("#policID").height(($(window).height()-80)*0.13); 177 this.chart = echarts.init(document.getElementById("policID")); 178 this.chart.setOption({ 179 color: this.color, 180 tooltip : {trigger: 'item', formatter: "{a} <br/> : {c} (ozvdkddzhkzd%)"}, 181 grid: {top: '0px', bottom:'80px', right:'10px'}, 182 legend: { 183 type: 'scroll', 184 orient: 'vertical', 185 icon:'circle', 186 left: 'right', 187 right: 30, 188 pageTextStyle:{color:'#fff'}, //圖例頁(yè)信息的文字樣式。 189 textStyle:{color:'#fff',}, 190 animation:true, 191 data: this.policeData.legendData, 192 selected: this.policeData.legendData, 193 pageIconColor: '#00FFFF', //翻頁(yè)按鈕的顏色。 194 pageIconInactiveColor:'#ADE5E5', // 翻頁(yè)按鈕不激活時(shí)（即翻頁(yè)到頭時(shí)）的顏色 195 }, 196 series : [{ 197 name: '今日告警總數(shù)', 198 type: 'pie', 199 radius : '38%', 200 center: ['35%', '40%'], 201 data: this.policeData.seriesData, 202 itemStyle: {emphasis: {shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)'}}, 203 label:{ 204 normal:{ 205 formatter: "({c}個(gè))" 206 } 207 } 208 }] 209 },true); 210 }, 211 }, 212 } 213 </script> 214 215 <style rel="stylesheet/scss" lang="scss" scoped> 216 .el-col { 217 height: 100%; 218 } 219 .communityPolice td { 220 padding: 8px; 221 } 222 .communityPolice .tdnum { 223 color: #ff9333; 224 font-weight: 600 225 } 226 .communityPolice .totalCls { 227 display: inline-block; 228 text-align: center; 229 width: 100%; 230 font-size: 16px; 231 font-weight: 600; 232 background: #1b3a74; 233 border-radius: 100%; 234 height: 30px; 235 color: yellow; 236 line-height: 30px; 237 margin-top: 10px; 238 } 239 </style> View Code

?

轉(zhuǎn)載于:https://www.cnblogs.com/luoxuemei/p/10716046.html

總結(jié)

以上是生活随笔為你收集整理的echarts常用实例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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