echarts中自定义图标

最新推荐文章于 2024-09-11 09:53:45 发布

橘哥哥

最新推荐文章于 2024-09-11 09:53:45 发布

阅读量1.6k

点赞数

分类专栏： vue 文章标签： echarts

本文链接：https://blog.csdn.net/ju__ju/article/details/116117794

版权

vue 专栏收录该内容

42 篇文章 3 订阅

订阅专栏

在这里插入图片描述
此处的两个图标实际上是下图的框选区域

主要是修改echarts中legend属性
echarts配置项手册✍

下面是部分代码


//引入图片
import imgSrc1 from "@/assets/imgs/hbgy/echarts-icon1.png";
import imgSrc2 from "@/assets/imgs/hbgy/charts-icon2.png";
//methods中定义方法
initEchart() {
      let dom = this.$refs.shareEchart;
      let myChart
      if (dom) {
        myChart = this.$echarts.init(dom);
        var dataArr = [];
        var data = new Date();
        data.setMonth(data.getMonth() + 1, 1); //获取到当前月份,设置月份
        for (var i = 0; i < 12; i++) {
          data.setMonth(data.getMonth() - 1); //每次循环一次 月份值减1
          var m = data.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          dataArr.unshift(data.getFullYear() + "-" + m);
        }
        myChart.setOption({
          xAxis: {
            type: "category",
            data: dataArr,
          },
          tooltip: {
            trigger: "axis",
          },
          legend: {
            x: "85%",
            y: "100",
            itemWidth: 120, // 设置宽度
            itemHeight: 120, //修改icon图形大小
            itemGap: 80, // 设置间距
            orient: "vertical",
            formatter: name => {   //此处是将原来的文字置为空,不然会显示在图标的旁边
                return ''
            },
            data: [
              {
                name: "总浏览量",
                icon: "image://" + imgSrc1 + "",
              },
              {
                name: "总使用量",
                icon: "image://" + imgSrc2 + "",
              },
            ],
          },
          yAxis: {
            type: "value",
          },
          grid: { right: "24%" },
          series: [
            {
              name: "总使用量",
              data: [
                2934,
                2132,
                3290,
                3930,
                4120,
                5101,
                6320,
                5180,
                3178,
                4171,
                5124,
                6058,
              ],
              type: "bar",
              itemStyle: {
                color: "#CAD9FF",
              },
            },
            {
              name: "总浏览量",
              data: [
                5200,
                4132,
                4901,
                4657,
                5190,
                6230,
                7320,
                6110,
                5178,
                6171,
                7124,
                7058,
              ],
              type: "bar",
              itemStyle: {
                color: "#7F9FFF",
              },
            },
          ],
        });
      }
    },