• echarts-饼状图默认选中高亮


    1.首页需要设置legend

    legend: {
              data: ["积极", "负面"],
              selectedMode: false,
              show: false
            }
    let index = 0;
          var myCharts = this.$echarts.init(document.getElementById(this.id));
          var option = {
            title: {
              text: this.title,
              left: "center",
              bottom: "0%",
              textStyle: {
                color: "#fff"
              }
            },
            legend: {
              data: ["积极", "负面"],
              selectedMode: false,
              show: false
            },
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            series: [
              {
                name: "",
                type: "pie",
                radius: ["50%", "80%"],
                center: ["50%", "40%"],
                avoidLabelOverlap: false,
                // selectedMode: "single",
                label: {
                  normal: {
                    show: false,
                    position: "center",
                    formatter: "{d}%",
                    textStyle: {
                      color: "#fff"
                    }
                  },
                  emphasis: {
                    show: true,
                    textStyle: {
                      fontSize: "16",
                      fontWeight: "bold"
                    }
                  }
                },
                itemStyle: {
                  normal: {
                    // color: "#c23531",
                    color: params => {
                      //自定义颜色
                      var colorList = ["#60bce0", "#274170"];
                      return colorList[params.dataIndex];
                    },
                    borderWidth: 1,
                    borderColor: "#fff"
                  }
                },
                labelLine: {
                  normal: {
                    show: false
                  }
                },
                data: this.pieData
              }
            ]
          };
          myCharts.setOption(option);
          myCharts.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: 0
          }); //设置默认选中高亮部分
          myCharts.on("mouseover", function(e) {
            if (e.dataIndex != index) {
              myCharts.dispatchAction({
                type: "downplay",
                seriesIndex: 0,
                dataIndex: index
              });
            }
          });
          myCharts.on("mouseout", function(e) {
            index = e.dataIndex;
            myCharts.dispatchAction({
              type: "highlight",
              seriesIndex: 0,
              dataIndex: e.dataIndex
            });
          });
    View Code
  • 相关阅读:
    CCF|学生排队|Java
    CCF|分蛋糕|Java
    CCF|公共钥匙盒|Java
    CCF|打酱油|Java
    CCF|游戏|Java
    CCF|最小差值|Java
    CCF|路径解析|Java
    CCF|碰撞的小球
    CCF|跳一跳
    Win10 1803更新UWP无法安装的解决办法|错误代码0x80073D0D
  • 原文地址:https://www.cnblogs.com/huangmin1992/p/10760794.html
Copyright © 2020-2023  润新知