按钮的切换和表格显示不同的实现方式

最新推荐文章于 2024-09-17 21:49:02 发布

weixin_44820324

最新推荐文章于 2024-09-17 21:49:02 发布

阅读量79

点赞数

文章标签： echarts javascript html

本文链接：https://blog.csdn.net/weixin_44820324/article/details/130194339

版权

按钮的切换
和怎么初始化echart表的实现

mounted() {
this.drawLine();
},
data() {
return {
outColor: “danger”,
inColor: “”,
showChart: 1,
};
},
methods: {
drawLine() {
// 基于准备好的dom，初始化echarts实例

  let callOutChart = this.$echarts.init(
    document.getElementById("callOutChart")
  );
  let callInChart = this.$echarts.init(
    document.getElementById("callInChart")
  );

  // 绘制图表
  callOutChart.setOption({
    //标题
    title: {
      text: "测试案例",
      left: "left",
    },
    //背景色
    backgroundColor: "#fff",
    //提示框组件
    tooltip: {
      trigger: "item",
      formatter: "{b}:  ({d}%)",
      backgroundColor: "#fff",
      textStyle: {
        color: "black",
      },
      // extraCssText: "box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);",
    },
    //数据集
    dataset: {
      source: [
        // ["product","正常状态","无法接通","号码错误","拒绝接听","无人接听","家属接听","患方不合作","其他"]
        ["随访", 548],
        ["复诊", 35],
      ],
    },
    //图例组件
    legend: {
      bottom: 1,
      left: "center",
      itemWidth: 10,
      itemHeight: 10,
      itemStyle: {
        borderCap: "round",
      },
      icon: "circle",
    },
    //系列
    series: [
      {
        type: "pie",
        radius: ["40%", "60%"],
        label: {
          formatter: "{b}:  ({d}%)",
        },
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        color: ["#3AA1FF", "#36CBCB"],
      },
    ],
  });

   callInChart.setOption({
    //标题
    title: {
      text: "测试案例",
      left: "left",
    },
    //背景色
    backgroundColor: "#fff",
    //提示框组件
    tooltip: {
      trigger: "item",
      formatter: "{b}:  ({d}%)",
      backgroundColor: "#fff",
      textStyle: {
        color: "black",
      },
      // extraCssText: "box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);",
    },
    //数据集
    dataset: {
      source: [
        ["业务分类A", 548],
        ["业务分类B", 37],
        ["业务分类C",44]
      ],
    },
    //图例组件
    legend: {
      bottom: 1,
      left: "center",
      itemWidth: 10,
      itemHeight: 10,
      itemStyle: {
        borderCap: "round",
      },
      icon: "circle",
    },
    //系列
    series: [
      {
        type: "pie",
        radius: ["40%", "60%"],
        label: {
          formatter: "{b}:  ({d}%)",
        },
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        color: ["#3AA1FF", "#36CBCB","#4ECB73"],
      },
    ],
  });


changeOutColor(val) {
  this.showChart = val;
  if (this.outColor == "") {
    this.outColor = "danger";
    this.inColor = "";
  }
},
changeInColor(val) {
  this.showChart = val;
  if (this.inColor == "") {
    this.inColor = "danger";
    this.outColor = "";
  }
},