vue + echarts 引入svg图

import BeefCutsFrance from "./Beef_cuts_France.svg";
  const _this = this;
      $.get(BeefCutsFrance, function (svg) {
        // 首先向 echarts 注册 SVG 字符串或解析过的 SVG DOM
        echarts.registerMap("Beef_cuts_France", { svg: svg });

        const config = {
          tooltip: {},
          visualMap: {
            left: "center",
            bottom: "10%",
            min: 5,
            max: 100,
            orient: "horizontal",
            text: ["", "Price"],
            realtime: true,
            calculable: true,
            inRange: {
              color: ["#dbac00", "#db6e00", "#cf0000"],
            },
          },
          series: [
            {
              name: "French Beef Cuts",
              type: "map",
              map: "Beef_cuts_France",
              roam: true,
              emphasis: {
                label: {
                  show: false,
                },
              },
              selectedMode: false,
              data: [
                { name: "Queue", value: 15 },
                { name: "Langue", value: 35 },
                { name: "Plat de joue", value: 15 },
                { name: "Gros bout de poitrine", value: 25 },
                { name: "Jumeau à pot-au-feu", value: 45 },
                { name: "Onglet", value: 85 },
                { name: "Plat de tranche", value: 25 },
                { name: "Araignée", value: 15 },
                { name: "Gîte à la noix", value: 55 },
                { name: "Bavette d'aloyau", value: 25 },
                { name: "Tende de tranche", value: 65 },
                { name: "Rond de gîte", value: 45 },
                { name: "Bavettede de flanchet", value: 85 },
                { name: "Flanchet", value: 35 },
                { name: "Hampe", value: 75 },
                { name: "Plat de côtes", value: 65 },
                { name: "Tendron Milieu de poitrine", value: 65 },
                { name: "Macreuse à pot-au-feu", value: 85 },
                { name: "Rumsteck", value: 75 },
                { name: "Faux-filet", value: 65 },
                { name: "Côtes Entrecôtes", value: 55 },
                { name: "Basses côtes", value: 45 },
                { name: "Collier", value: 85 },
                { name: "Jumeau à biftek", value: 15 },
                { name: "Paleron", value: 65 },
                { name: "Macreuse à bifteck", value: 45 },
                { name: "Gîte", value: 85 },
                { name: "Aiguillette baronne", value: 65 },
                { name: "Filet", value: 95 },
              ],
            },
          ],
        };
        _this.$nextTick(() => {
          _this.myChart.setOption(config);
        });

        return config;
      });
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容