需求：实现柱状图显示各个地方和总和的点击量，升序排列，点击柱图变色

 

  1 <template>
  2     <div>
  3         <div ref="mycharts" class="mydiv"></div>
  4     </div>
  5 </template>
  6 
  7 <script>
  8 import axios from 'axios';
  9 import * as echarts from 'echarts';
 10 
 11 const yData=[
 12     "武汉",
 13     "南京",
 14     "南宁",
 15     "总和"
 16 ];
 17 
 18 export default {
 19 
 20   data() {
 21     return {
 22         // yData可以从后台获取
 23         yData,
 24         selectId:-1,
 25         col:['#c1232b','#b5c334','#fcce10','#e87c25'],
 26         data:[17,33,12,62],
 27         emphaColor:''
 28     };
 29   },
 30   created(){
 31 
 32   },
 33   mounted(){
 34     this.getEcharts();
 35   },
 36   methods:{
 37 
 38     getEcharts(){
 39         // 初始化echarts实例
 40         let myCharts=echarts.init(this.$refs.mycharts)
 41         //需要在下方内部函数或者回调函数的外部改变this指向问题
 42         let _this=this
 43         let option = {
 44             xAxis:{ 
 45                     type: 'value',
 46                     splitLine:{
 47                         show:false
 48                     }
 49             },
 50             yAxis: { 
 51                 type: 'category',
 52                 data: this.yData,
 53                 //Y轴对应的数据升序排列
 54                 inverse:true,
 55                 // name:'场点',
 56                 axisTick:{
 57                     show:false
 58                 },
 59                 axisLine:{
 60                     show:false
 61                 },
 62                 axisLabel:{
 63                     fontSize:20
 64                 }
 65             },
 66             legend:{
 67                 //与series中的name属性的值一一对应
 68                 data:["点击量"],
 69                 textStyle:{
 70                     fontSize:30
 71                 },
 72                 itemStyle:{
 73                     color:'#DAA520'
 74                 }
 75             },
 76             series: [
 77                 {
 78                     realtimeSort:true,//是否开启序列的实时排序,排序让数值和对应标签一一对应
 79                     // seriesLayoutBy:"column",
 80                     name:"点击量",
 81                     type: 'bar',
 82                     //this.data可从后台获取
 83                     data: this.data,
 84                     label:{
 85                         show:true,
 86                         position:'right'
 87                     },
 88                     barWidth:50,
 89                     itemStyle:{
 90                         normal:{
 91                             color:function(parmars){
 92                                 // console.log("this:",this);
 93                                 // console.log("_this:",_this);
 94                                 if(_this.selectId===-1){
 95                                     return '#DAA520'
 96                                 }
 97                                 if(parmars.dataIndex===_this.selectId){
 98                                     return '#FFD700';
 99                                 }
100                                 return '#DCDCDC';
101                                 
102                             }
103                         }
104                     },
105                     emphasis:{
106                         itemStyle:{
107                             color:'#FFD700'
108                         }
109                     }
110                 }
111             ]
112         };
113         //使用配置项option显示图表
114         myCharts.setOption(option);
115         myCharts.on('click',function(parmars){
116             if(_this.selectId!=parmars.dataIndex){
117                 // console.log(this);
118                 //在函数的函数内部关于this的指向问题，在这里应该使用_this，若使用this则获取不到data中定义的数据
119                 _this.selectId=parmars.dataIndex;
120             }else{
121                 _this.selectId=-1;
122             }
123             myCharts.setOption(option);
124         });
125         myCharts.getZr().on('mousemove',parmars=>{
126             let pointInPixel=[parmars.offsetX,parmars.offsetY];
127             if(myCharts.containPixel('grid',pointInPixel)){
128                 _this.selectId=-1;
129                 // console.log(_this.selectId);
130                 myCharts.setOption(option);
131             }
132         });
133         //监听窗口尺寸事件，使得图表大小始终匹配页面尺寸的变化
134         window.addEventListener('resize',function(){
135             myCharts.resize();
136         })
137     }
138   }
139 };
140 </script>
141 
142 <style scoped>
143 .mydiv{
144     width: 100%;
145     height: 600px;
146 }
147 </style>
View Code

 　　若上述option中的排序设置不生效，可先对数据进行排序，将排序后的数据渲染到图表上。相关增加代码如下：

 1 this.data=[
 2     {name:"武汉", value:17},
 3     {name:"合肥",value:33},
 4     {name:"南宁",value:12},
 5     {name:"全场点",value:62}
 6 ]
 7 
 8 //在methods中定义一个排序函数，将返回的新数据赋值给this.data
 9 sortData(){
10     const newData = this.data.sort(function(a,b){
11         return a.value - b.value
12     })         
13     return newData
14 }    
15 
16 //在合适的地方引用上述排序函数并赋值给this.data，根据this.data得出x轴和y轴的相关数据
17 this.data=this.sortData()
18 let yd=[]
19 let xd=[]
20 this.data.forEach(function(item){
21     yd.push(item.name)
22     xd.push(item.value)
23 })
24 
25 //然后将yd和xd分别放到合适的x轴，y轴或者series的data位置上
View Code

 

posted @ 2023-08-13 22:45  syk_ahhf  阅读(18)  评论(0)    收藏  举报