echart 画图技巧汇总

1.饼图中间画文字

image.png

let myChart = this.$echarts.init(pieChart);
     let options = {
       tooltip: {
         trigger: "item",
         formatter: "{a} 
{b}: {c} ({d}%)",
       },
       title: {                                          //title和graphic 中间画文字
         text: this.totalCount,
         left: "center",
         top: "40%",
         textStyle: {
           color: "#545a68",
           fontSize: 26,
           align: "center",
         },
       },
       graphic: {
         type: "text",
         left: "center",
         top: "54%",
         style: {
           text: "总摊位数",
           textAlign: "center",
           color: "#545a68",
           fill: "#333",
           fontSize: 14,
           align: "center",
         },
       },

       series: [
         {
           name: "摊位",
           type: "pie",
           radius: ["40%", "70%"],
           labelLine: {
             length: 20,
             length2: 0,
           },
           label: {         //动态lable
             formatter: function (data) {
               if (data.name === "未租赁") {
                 return "{c|" + data.value + "}个\n{hr|}\n {b|" + data.name + "}";
               } else {
                 return "{c|" + data.value + "}个\n{hr1|}\n {b|" + data.name + "}";
               }
             },
             fontSize: 16,
             padding: [0, -3],
             rich: {
               c: {
                 fontSize: 24,
                 lineHeight: 33,
               },
               hr: {
                 borderColor: "#545a68",
                 width: "100%",
                 borderWidth: 1,
                 height: 0,
               },
               hr1: {
                 borderColor: "#43b748",
                 width: "100%",
                 borderWidth: 1,
                 height: 0,
               },
               b: {
                 fontSize: 16,
                 lineHeight: 33,
               },
             },
           },
           legendHoverLink: false,
           hoverAnimation: false,
           itemStyle: {
             borderColor: "#ffffff",
             borderWidth: 3,
           },
           data: data,
         },
       ],
       color: ["#43b748", "#545a68"],
     };
     myChart.setOption(options);

2.柱状图圆角和lable自定义

image.png

 let myChart = this.$echarts.init(barChart);
      let options = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {                    
          data: ["已租赁", "未租赁"],
          right: "3%",
        },
        grid: {
          left: "3%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: data.labelArr,
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                width: 0,
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#f4f9f9"],
                width: 1,
                type: "solid",
              },
            },
            axisLabel: {
              interval: 0,
              lineHeight: 16,
              formatter: function (params) {        //自定义label
                var arr, newParamsName;
                arr = params.split("-");
                if (arr.length > 1) {
                  newParamsName = arr[0] + "-\n" + arr[1];
                } else {
                  newParamsName = params;
                }
                return newParamsName;
              },
            },
          },
        ],

        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                width: 0,
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#dee4e5"],
                width: 1,
                type: "solid",
              },
            },
          },
        ],
        series: [
          {
            name: "已租赁",
            type: "bar",
            barWidth: 16,
            data: data.rentedCountArr,
            itemStyle: {
              barBorderRadius: [4, 4, 0, 0],     //bar圆角

            },
          },
          {
            name: "未租赁",
            type: "bar",
            barWidth: 16,
            data: data.notRentedCountArr,
            itemStyle: {
              barBorderRadius: [4, 4, 0, 0],
            },
          },
        ],
        color: ["#43b748", "#b5c7d0"],
      };

      myChart.setOption(options);