Echarts各类图表开发遇到的一些问题集锦

Therefore丶

已于 2022-06-28 17:15:11 修改

阅读量466

点赞数

分类专栏：前端文章标签： echarts 前端 javascript

于 2022-01-12 09:24:13 首次发布

本文链接：https://blog.csdn.net/u010051036/article/details/122445847

版权

一、在做echarts点击事件的时候，不仅需要点击标题，进入指定路由页面。而且需要点击某些具体数据，进行下钻。

可以用以下代码实现，注意 let _this = this;否则很可能会出现一些undefined的情况。

//点击下钻
      async drill_down() {
        let myChart = this.chart;
        let _this = this;
        myChart.on('click', async function (onParams) {
            console.log('jinruclick', onParams)//打印点击后的参数值
            console.log('jinruclick', onParams.event.target.style.text)
            if (onParams.event.target.style.text && onParams.event.target.style.text == '就诊人员人次分析') {
              _this.$router.push('/mz');
            }
            var param = onParams;
            //x坐标轴是月份的时候才能下钻
            //x轴数据
            this.xData = [];
            this.xData_day = [];
            //门诊数据
            this.mzData = [];
            this.mzData_day = [];
            //住院数据
            this.zyData = [];
            this.zyData_day = [];
            var paramArr = param.name.toString().split('月');
            var paramYear = param.name.toString().split('-')[0].replace("(", "")//(2019-1-1,2019-1-31)
            var paramMonth = paramArr[0].split('-')[1];//点击得到的月份
            if (paramArr.length == 2) {
              // if (1 == 1) {
              this.isShowBack = true;
              const param_zy = new URLSearchParams();
              param_zy.append('STA_TYPE_CODE', _this.STA_TYPE_CODE);
              param_zy.append('STA_ITEM_DATE', getNowMonthFirstLastDay(paramYear, paramMonth));
              param_zy.append('time_unit', 'Date');
              
              const postUrl = "/api/indexget?model=" + _this.model;
              await axios.post(postUrl, param_zy)
                .then(res => {
                  let detailData = res.data.detail;
                  // _this.resDatas = [];
                  // _this.resDatas = res.data.detail;
                  for (let i = 0; i < detailData.length; i++) {
                    _this.xData_day.push(detailData[i].name.split('-')[2] < 10
                      ? (detailData[i].name.split('-')[2].charAt(1))
                      : (detailData[i].name.split('-')[2]));
                    _this.mzData_day.push(detailData[i].value)
                  }
                  //渲染点击后获取到的门诊数据
                  myChart.setOption({
                    xAxis: {
                      data: _this.xData_day,
                      name: '日期',
                    },
                    series: [
                      {name: _this.legend, data: _this.mzData_day},],
                    toolbox: {
                      left: 8,
                      bottom: 5,
                      feature: {
                        myTool1: {
                          show: true,
                          title: "返回",
                          icon:
                            "path://M853.333333 245.333333H245.333333l93.866667-93.866666c12.8-12.8 12.8-34.133333 0-46.933334-12.8-12.8-34.133333-12.8-46.933333 0l-145.066667 145.066667c-12.8 12.8-12.8 34.133333 0 46.933333l145.066667 145.066667c6.4 6.4 14.933333 10.666667 23.466666 10.666667s17.066667-4.266667 23.466667-10.666667c12.8-12.8 12.8-34.133333 0-46.933333L256 311.466667h597.333333c6.4 0 10.666667 4.266667 10.666667 10.666666v426.666667c0 6.4-4.266667 10.666667-10.666667 10.666667H170.666667c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h682.666666c40.533333 0 74.666667-34.133333 74.666667-74.666667V320c0-40.533333-34.133333-74.666667-74.666667-74.666667z",
                          // 点击返回事件