echarts同时展示三个圆环图并自定义文字颜色

最新推荐文章于 2024-04-02 13:12:16 发布

初级前端工程师毛毛

最新推荐文章于 2024-04-02 13:12:16 发布

阅读量1.2k

点赞数 2

文章标签： echarts

本文链接：https://blog.youkuaiyun.com/weixin_38891273/article/details/120522580

版权

图片效果

代码 option配置；

 <div id="myChart1" :style="{ width: '464px', height: '315px' }"></div>

 showCharts() {

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

      var option1;

      option1 = {

        tooltip: {

          trigger: "item",

        },

        series: [

          {

            type: "pie",

            radius: ["26%", "30%"],

            center: ["17%", "50%"],

            label: {

              position: "center",

              formatter: "{total|" + 30 + "}" + "\n\r" + "{active|外来车辆}",

              rich: {

                total: {

                  fontSize: 30,

                  color: "#E7DC65",

                },

                active: {

                  fontSize: 12,

                  color: "#E7DC65",

                  lineHeight: 16,

                },

              },

            },



            data: [

              { value: 25, name: "外来车辆", itemStyle: { color: "#E7DC65" } },

              { value: 5, name: "", itemStyle: { color: "#2A304E" } },

            ],

          },

          {

            type: "pie",

            radius: ["40%", "45%"],

            center: ["50%", "50%"],

            label: {

              position: "center",

              formatter:

                "{total|" + 30 + "}" + "\n\r" + "{active|场内车辆总数}",

              rich: {

                total: {

                  fontSize: 40,

                  color: "#00E2B3",

                },

                active: {

                  fontSize: 14,

                  color: "#00E2B3",

                  lineHeight: 16,

                },

              },

            },



            data: [

              { value: 25, name: "场内车辆总数", itemStyle: { color: "#00E2B3" } },

              { value: 5, name: "", itemStyle: { color: "#022245" } },

            ],

          },

          {

            type: "pie",

            radius: ["26%", "30%"],

            center: ["83%", "50%"],

            label: {

              position: "center",

              formatter: "{total|" + 30 + "}" + "\n\r" + "{active|准入车辆}",

              rich: {

                total: {

                  fontSize: 30,

                  color: "#36A6F8",

                },

                active: {

                  fontSize: 12,

                  color: "#36A6F8",

                  lineHeight: 16,

                },

              },

            },

            data: [

              { value: 25, name: "准入车辆", itemStyle: { color: "#36A6F8" } },

              { value: 5, name: "", itemStyle: { color: "#2A304E" } },

            ],

          },

        ],

      };

      option1 && myChart1.setOption(option1);

}