美文网首页
echart 画图技巧汇总

echart 画图技巧汇总

作者: sisselxie | 来源:发表于2021-01-14 13:18 被阅读0次

    1.饼图中间画文字


    image.png
    let myChart = this.$echarts.init(pieChart);
         let options = {
           tooltip: {
             trigger: "item",
             formatter: "{a} <br/>{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);
    

    相关文章

      网友评论

          本文标题:echart 画图技巧汇总

          本文链接:https://www.haomeiwen.com/subject/qzgmaktx.html