devbox
小蓝xlanll
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

echarts问题总结_mychart.getzr()

作者：小蓝xlanll | 2024-05-07 14:43:58

赞

踩

mychart.getzr()

1.点击事件简单应用

  1. const _this = this// vue中参数传递
  2. this.chartOne = echarts.init(document.getElementById('chartOne'));
  3. this.chartTow.setOption(optionOne); //设置option
  4. this.chartTow.getZr().on('click', (params) => {// getZr()
  5.           if (!params.target) { // 点击在了空白处，做些什么。
  6.             _this.isdel = true;// 作为普通变量传给内部
  7.           }
  8.         });
  9.  
  10.  
  11. // zrender 事件与echarts 事件不同。前者是当鼠标在任何地方都会被触发，
  12. // 而后者是只有当鼠标在图形元素上时才能被触发。
  13. myChart.getZr().on('click', function (event) {
  14.     // 该监听器正在监听一个`zrender 事件`。
  15. });
  16. myChart.on('click', function (event) {
  17.     // 该监听器正在监听一个`echarts 事件`。
  18. });
  19.  
  20. // zrender事件，我们就可以实现 “监听空白处的事件”
  21. myChart.getZr().on('click', function (event) {
  22.     // 没有 target 意味着鼠标/指针不在任何一个图形元素上，它是从“空白处”触发的。
  23.     if (!event.target) {
  24.         // 点击在了空白处，做些什么。
  25.     }
  26. });

2.vue 单个页面循环多个echars

  1. <template>
  2. <div>
  3.       <el-row>
  4.         <el-col :span="8" v-for="i in 6">
  5.           <div :ref="'roseChart'" style="height:260px; margin: 10px; width: 100%;">
  6.           </div>
  7.         </el-col>
  8.       </el-row>
  9.     </div>
  10. </template>
  11.  
  12. // js 
  13. // 循环获取roseChart
  14.         for(var i=0;i<this.$refs.['roseChart'].length;i++){
  15.           let myChart = echarts.init(this.$refs.['roseChart'][i]);
  16.           myChart.setOption(optionOne);
  17.           myChart.getZr().on('click', (params) => {
  18.             if (!params.target) { // 点击在了空白处，做些什么。
  19.               _this.isdel = true;
  20.             }
  21.           });
  22.         }

3.给柱状图的柱子添加颜色

  1. optionOne.series.forEach(item => {
  2.               item['itemStyle'] = {
  3.                 normal: {
  4.                   color: function() {
  5.                     return '#' + Math.random().toString(16).substr(2, 6).toUpperCase();
  6.                   }
  7.                 }
  8.               }
  9.             })

4.用函数给颜色定值

  1. {
  2.     color: (()=>{
  3.         let res = [];
  4.         var len = 100;
  5.         for (var i = 0, size = len; i < size; i++) {
  6.             res.push('#' + Math.random().toString(16).substr(2, 6).toUpperCase());
  7.         }
  8.         return res;
  9.         })(),
  10. }
  11. // 函数的样式不同
  12. {
  13.     color: function() {
  14.         return '#' + Math.random().toString(16).substr(2, 6).toUpperCase();
  15.     }
  16. }

5.将返回的数据填充到表格

line或bar data对应方法中的res.push([result[i].regionName, result[i].nums]); 填充方式不同

  1. init(param) {
  2.         this.chartcity = echarts.init(this.$refs.cityDom);
  3.         listCitys(param).then(res => {
  4.           this.chartData = res.rows;
  5.           let result = this.chartData;
  6.           this.optioncity = {
  7.             textStyle: {
  8.               color: '#ffffff'
  9.             },
  10.             tooltip: {
  11.               trigger: 'item'
  12.             },
  13.             xAxis: {
  14.               type: 'category',
  15.               axisLine: {
  16.                 lineStyle: {
  17.                   color: '#ffffff',
  18.                   width: 1, //这里是为了突出显示加上的
  19.                 }
  20.               }
  21.             },
  22.             yAxis: {
  23.               type: 'value',
  24.               axisLine: {
  25.                 lineStyle: {
  26.                   color: '#ffffff',
  27.                   width: 1, //这里是为了突出显示加上的
  28.                 }
  29.               }
  30.             },
  31.             series: [{
  32.               data: (() => {
  33.                 let res = [];
  34.                 let len = result.length;
  35.                 for (let i = 0, size = len; i < size; i++) {
  36.                   res.push([result[i].regionName, result[i].nums]);
  37.                 }
  38.                 return res;
  39.               })(),
  40.               type: 'bar',
  41.               showBackground: true,
  42.               backgroundStyle: {
  43.                 color: 'rgba(180, 180, 180, 0.2)'
  44.               },
  45.               itemStyle: {
  46.                 normal: {
  47.                   color: function() {
  48.                     return '#' + Math.random().toString(16).substr(2, 6).toUpperCase();
  49.                   }
  50.                 }
  51.               }
  52.             }]
  53.           };
  54.           window.onresize = this.chartcity.resize;
  55.           this.chartcity.setOption(this.optioncity); //设置option
  56.         })
  57.       }

pie res.push({ name: result[i].className, value: result[i].nums });

  1. init(param) {
  2.         this.chartPie = echarts.init(this.$refs.pieDom);
  3.         listChartPies(param).then(res => {
  4.           this.chartData = res.rows;
  5.           let result = this.chartData;
  6.           this.optionPie = {
  7.             title: {
  8.               left: 'center',
  9.             },
  10.             legend: {
  11.               bottom: 'bottom',
  12.               orient: 'vertical',
  13.               textStyle: {
  14.                 color: '#ffffff'
  15.               },
  16.             },
  17.             color: ['#5f9dff', '#6be1c1', '#ffed79', '#ee5959', '#7d92d4', '#00ff7f'],
  18.             tooltip: {
  19.               trigger: 'item'
  20.             },
  21.             series: [{
  22.               center: ["50%", "40%"],
  23.               // name: '访问来源',
  24.               type: 'pie',
  25.               radius: '50%',
  26.               data: (() => {
  27.                 let res = [];
  28.                 let len = result.length;
  29.                 for (let i = 0, size = len; i < size; i++) {
  30.                   res.push({
  31.                     name: result[i].className,
  32.                     value: result[i].nums
  33.                   });
  34.                 }
  35.                 return res;
  36.               })(),
  37.             }]
  38.           };
  39.           window.onresize = this.chartPie.resize;
  40.           this.chartPie.setOption(this.optionPie); //设置option
  41.         })
  42.       }

6.修改弹出提示

  1. tooltip: {
  2.     trigger: 'item',
  3.     formatter: (params) => {
  4.         return params.marker + params.name + ': ' + params.value + '元';
  5.     }
  6. },

 7.legend分为左右两份布局

  1. // 后端返回数据。。。
  2. let legendData = ["刑满释放人员","吸毒人员","宗教极端人员","收押人员","收教人员","收监人员","易感染人员","涉众","涉军","涉核参战人员","涉访人员","社区矫正","精神病人员","艾滋病人员","解救人员","连管人员","邪教人员",]
  3.  
  4. // echarts部分。。。。
  5. legend: [
  6.   {
  7.     icon: "bar",
  8.     textStyle: {
  9.       color: "#2efcfa",
  10.     },
  11.     data: legendData.slice(0, 8),
  12.     left: "left",
  13.     bottom: 'bottom',
  14.   },
  15.   {
  16.     icon: "bar",
  17.     textStyle: {
  18.       color: "#2efcfa",
  19.     },
  20.     data: legendData.slice(8, 16),
  21.     right: "right",
  22.     bottom: 'bottom',
  23.   }
  24. ],

8.显示的字太长

  1. formatter: (params) => {
  2.         if (params.length > 5) {
  3.             return params.substring(0, 5) + '...'
  4.         } else {
  5.             return params
  6.         }
  7.     },

9.echarts设置滑过可点击区域时将鼠标变为小手样式（一般与区域点击事件结合使用）

  1. // 方法1
  2. let that = this;
  3. this.chartPie.getZr().on('mousemove', param => {
  4.     that.chartPie.getZr().setCursorStyle('pointer')
  5. });
  6.  
  7. // 方法2
  8. <div id='chartsbar'></div>
  9.  
  10. <style>
  11. #chartsbar>div>canvas:hover{
  12.         cursor: default;
  13.     }
  14. </style>

10.echarts获取点击位置

  1. this.chartbar.getZr().on('mousemove', param => {
  2.     let pointInPixel = [param.offsetX, param.offsetY];
  3.     if (!_this.chartbar.containPixel('series', pointInPixel)) {
  4.         _this.chartbar.getZr().setCursorStyle('pointer');
  5.     }
  6. });

11.echarts使用getZr()点击事件获取柱状图数据

  1. chart.getZr().on('click', (params) => {
  2. 				let pointInPixel = [params.offsetX, params.offsetY];
  3. 				if (chart.containPixel('grid', pointInPixel)) {
  4. 					let pointInGrid = chart.convertFromPixel({
  5. 						seriesIndex: 0
  6. 					}, pointInPixel);
  7. 					let xIndex = pointInGrid[0]; //索引
  8. 					let handleIndex = Number(xIndex);
  9. 					let seriesObj = chart.getOption(); //图表object对象
  10. 					console.log(handleIndex, seriesObj);
  11. 				};
  12. 			});

12 echarts适用饼图直观显示数值方式

  1. series: [{
  2.     name: title,
  3.     type: 'pie',
  4.     radius: '50%',
  5.     data: data,
  6.     itemStyle: {
  7.         normal: {
  8.             label: {
  9.                 show: true,
  10.                 formatter: '{b} : {c} ({d}%)'
  11.             },
  12.             labelLine: { show: true }
  13.         }
  14.      }
  15. }]

13.echarts 面积图颜色渐变

areaStyle为面积参数

  1. series: [{
  2.   name: '本月',
  3.   smooth: true,
  4.   data: data,
  5.   type: 'line',
  6.   areaStyle: {
  7.     color: {
  8.       type: 'linear',
  9.       x: 0,
  10.       y: 0,
  11.       x2: 0,
  12.       y2: 1,
  13.       colorStops: [{
  14.         offset: 0, color: '#5f9dff'  // 100% 处的颜色
  15.       }, {
  16.         offset: 1, color: '#0c1268' //   0% 处的颜色
  17.       }],
  18.       global: false // 缺省为 false
  19.     }
  20.   },
  21.   color: '#5f9dff', //线条颜色
  22. },]

14.柱状图颜色渐变

  1. series: [{
  2.   type: 'bar',
  3.   data: dataBar,
  4.   barWidth: 8,
  5.   itemStyle: {
  6.     normal: {
  7.       // X轴是数据轴
  8.       //柱形图圆角，初始化效果
  9.       barBorderRadius: [0, 15, 15, 0],
  10.       // 线性渐变色
  11.       color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
  12.         { offset: 0, color: '#006da8' },
  13.         { offset: 1, color: '#31b7ff' },
  14.       ])
  15.       // Y轴是数据轴
  16.       // barBorderRadius: [15, 15, 0, 0],
  17.       // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  18.       //   { offset: 0, color: '#006da8' },
  19.       //   { offset: 1, color: '#31b7ff' },
  20.       // ])
  21.     },
  22.   },
  23.   label: {
  24.     show: true,
  25.     position: 'right',
  26.     color: '#FFFFFF'
  27.   },
  28. }]
  29. // 圆心渐变
  30. new echarts.graphic.RadialGradient(0.5,0.5,1.0, [
  31.   { offset: 0, color: '#00ffff' },
  32.   { offset: 1, color: '#55aaff' },
  33. ])
  34. // 圆心渐变
  35. color: {
  36.   type: 'radial', // 径向渐变
  37.   x: 0.5,  // 圆心点x轴，0.5为柱状图宽度中心
  38.   y: 0.5,  // 圆心点y轴，0.5为柱状图高度中心
  39.   r: 0.5,   // 半径
  40.   colorStops: [
  41.     {
  42.      offset: 0, color: 'red' // 0%处的颜色为红色
  43.     },
  44.     {
  45.       offset: 1, color: 'blue' // 100%处的颜色为蓝
  46.     }
  47.   ]
  48. }
  49. // 线性渐变
  50. color: {
  51.   type: 'linear', 
  52.   x: 0,
  53.   y: 0,
  54.   x2: 0,
  55.   y2: 1,
  56.   colorStops: [{
  57.       offset: 0,
  58.       color: 'red' // 0%处的颜色为红色
  59.   }, {
  60.       offset: 1,
  61.       color: 'blue' // 100%处的颜色为蓝
  62.   }]
  63. }

15.Echarts数据可视化legend图例属性设置

  1. legend={
  2.   show:true,                                  //是否显示
  3.   zlevel:0,                                   //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
  4.   z:2,                                         //所属组件的z分层，z值小的图形会被z值大的图形覆盖
  5.   left:"center",                              //组件离容器左侧的距离,'left', 'center', 'right','20%'
  6.   top:"top",                                   //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
  7.   right:"auto",                               //组件离容器右侧的距离,'20%'
  8.   bottom:"auto",                              //组件离容器下侧的距离,'20%'
  9.   width:"auto",                               //图例宽度
  10.   height:"auto",                              //图例高度
  11.   orient:"horizontal",                        //图例排列方向
  12.   align:"auto",                               //图例标记和文本的对齐,left,right
  13.   padding:5,                                   //图例内边距，单位px  5  [5, 10]  [5,10,5,10]
  14.   itemGap:10,                                  //图例每项之间的间隔
  15.   itemWidth:25,                               //图例标记的图形宽度
  16.   itemHeight:14,                              //图例标记的图形高度
  17.   formatter:function (name) {                 //用来格式化图例文本，支持字符串模板和回调函数两种形式。模板变量为图例名称 {name}
  18.       return 'Legend ' + name;
  19.   },
  20.   selectedMode:"single",                    //图例选择的模式,true开启,false关闭,single单选,multiple多选
  21.   inactiveColor:"#ccc",                     //图例关闭时的颜色
  22.   textStyle:mytextStyle,                    //文本样式
  23.   data:['类别1', '类别2', '类别3'],          //series中根据名称区分
  24.   backgroundColor:"transparent",            //标题背景色
  25.   borderColor:"#ccc",                         //边框颜色
  26.   borderWidth:0,                               //边框线宽
  27.   shadowColor:"red",                          //阴影颜色
  28.   shadowOffsetX:0,                            //阴影水平方向上的偏移距离
  29.   shadowOffsetY:0,                            //阴影垂直方向上的偏移距离
  30.   shadowBlur:10,                               //阴影的模糊大小
  31. };

16.vue引用和使用echarts4/echarts5的差别

4版本

import echarts from 'echarts'

5版本

  1. import * as echarts from 'echarts'
  2. // 或者
  3. const echarts = require('echarts');

17.echarts,除了点击legend,其他 部分可以触发跳转

  1. this.chart.getZr().on('click', (params) => {
  2.         if (!params.target) {
  3.           this.$router.push({
  4.             path: path
  5.           });
  6.         }
  7.       });

18. series-pie. startAngle

起始角度，支持范围[0, 360]。可以控制饼图的开始角度,防止标签溢出图表

19. echarts y轴的字左对齐

grid 下的 left: '-15%'

yAxis.axisLabel 下的margin: 220, 刻度标签与轴线之间的距离

yAxis.axisLabel.textStyle: { align: 'left' //** }

通过这个这三个原始联调配置

20:设置markPoint

 

  1. series: [
  2.           {
  3.             name: 'test',
  4.             data: [['02月',100],['03月',97]],
  5.             type: 'line',
  6.             markPoint: {
  7.               data: [{
  8.                 xAxis: '02月', // x轴坐标
  9.                 yAxis: '100',  // y轴坐标
  10.                 value: '100',  // y轴的值
  11.               }]
  12.             }
  13.           }
  14.         ]

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/549756
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号