zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    同步和异步Http请求工具类通过get和post方式发送请求
    c# IPC实现本机进程之间的通信
    C# 建立window服务
    WPF 将控件绑定到变量
    WPF触发器的使用
    C# DataTable 和List之间相互转换的方法
    WPF自适应窗体实现小结
    WPF简单导航框架(Window与Page互相调用)
    JavaEE框架面试题
    快速排序
  • 原文地址:https://www.cnblogs.com/huangmin1992/p/10760794.html
Copyright © 2011-2022 走看看