两个简单的echarts 实例

cnmone

于 2022-08-18 22:09:11 发布

阅读量240

点赞数

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

本文链接：https://blog.csdn.net/weixin_44539392/article/details/126414827

版权

vue 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

`echarts demo`

initChart() {
      let chartDom = document.getElementById("chartId");
      let myChart = echarts.init(chartDom);

      let option = {
        tooltip: {},
        color: ["#f60", "#c5e"],
        xAxis: {
          type: "category",
          axisLabel: {
            interval: 0,
            rotate: 16,
            color(v, i) {
              return i > 3? '#F60': '#666'
            }
          },
          axisTick: {
            show: false,
          },
          data: [
            "A公司",
            "B公司",
            "C公司",
            "D公司",
            "E公司",
            "F公司",
            "G公司",
          ],
        },
        yAxis: {
          axisTick: {
            show: false,
          },
        },
        legend: {
          origin: "vertical",
          top: "bottom",
          data: ["未完成", "已完成"],
        },
        series: [
          {
            name: "未完成",
            data: [45, 55, 66, 21, 32],
            type: "bar",
            barWidth: "20%",
          },
          {
            name: "已完成",
            data: [33, 35, 69, 89, 45],
            type: "bar",
            barWidth: "20%",
          },
        ],
      };

      myChart.setOption(option);
    }

initChart() {
      let chartDom = document.getElementById("chartId");
      let myChart = echarts.init(chartDom);
    
      let option = {
        title: {
          text: "{b|81.2%}",
          subtext: '{a|81.2%}',
          subtextStyle: {
            rich: {
              a: {
                fontSize: '18',
                color: 'black'
              }
            }
          },
          textStyle: {
            rich: {
              b: {
                fontSize: "18",
              },
            },
          },
          left: "center",
          top: "center",
        },
        color: ["#f60", "#666"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}总额：{c}元 ({d}%)",
        },
        legend: {
          origin: "vertical",
          left: "right",
          data: ["已完成", "未完成"],
        },
        series: [
          {
            name: "业务完成率",
            type: "pie",
            radius: ["40%", "55%"],
            center: ["50%", "50%"],
            data: this.c1Data,
            label: {
              formatter: "{b}总额：{c}元",
              rich: {
                cv: {
                  fontSize: 18,
                },
              },
            },
          },
        ],
      };

      myChart.setOption(option);
    },