Echarts饼状图柱状图指示线字体颜色百分比X轴Y轴隐藏等信息修改

饼状图

饼块信息重写

tooltip: {
   trigger: 'item',
   formatter: "{a} <br/>{b}: {c} ({d}%)" // 饼块详细信息重写 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比;
}

饼块颜色重写

series: [
    {
        name: '用地类型',
        type: 'pie',
        radius: ['40%', '70%'],
        data: bieData,
        color: ["#61D9AC", "#FFAA74", "#59AEF1"] // 饼块颜色
    }
]

指示线信息重写

series: [
            {
                name: '用地类型',
                type: 'pie',
                radius: ['40%', '70%'],
                data: bieData,
                itemStyle: {
                  normal: {
                      label: {
                          formatter: "{b}\n{d}%" // 指示线信息重写
                      },
                      borderWidth: 2,
                      borderColor: '#fff',
                  },
                }
            }
        ]

完整代码

// 饼图
    async initInefficientLandUseBie() {
      var params = new FormData();
      params.append("nf", this.params.nf);
      params.append("qy", this.params.qy);
      params.append("mjssks", this.params.mjssks);
      params.append("mjssjs", this.params.mjssjs);
      params.append("qlrmc", this.params.qlrmc);
      params.append("pageIndex", this.pageSetting.pageIndex);
      params.append("pageSize", this.pageSetting.pageSize);
      let bieData = [];
      await this.$ajax.post(this.$api.getInefficientLandUseBieData, params, this).then((res) => {
        let {data, success} = res;
        if (success) {
          bieData = data
        } else {
          this.$Message.error(data.message);
        }
      });
      let option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)" // 饼块详细信息重写
        },
        series: [
            {
                name: '用地类型',
                type: 'pie',
                radius: ['40%', '70%'],
                data: bieData,
                color: ["#61D9AC", "#FFAA74", "#59AEF1"], // 饼块颜色
                itemStyle: {
                  normal: {
                      label: {
                          formatter: "{b}\n{d}%" // 指示线信息重写
                      },
                      borderWidth: 2,
                      borderColor: '#fff',
                  },
                }
            }
        ]
      };
      let myChart = echarts.init(document.getElementById('lxBar'));
      myChart.setOption(option);
    },

柱状图

X轴信息过多旋转展示

xAxis: {
          type: 'category',
          data: xData,
          axisLabel: {    // X轴坐标数据旋转
            rotate: 50,
          },
        }

背景显示网格虚线

xAxis: {
          type: 'category',
          data: xData,
          splitLine: { // 纵向虚线
              show: true,
              lineStyle:{
                  type:'dashed'
              }
          }
        },
        yAxis: {
          type: 'value',
          name:'单位：宗',
          splitLine: { // 横向虚线
              show: true,
              lineStyle:{
                  type:'dashed'
              }
          }
        },

隐藏X轴Y轴

xAxis: {
          type: 'category',
          data: xData,
          axisLine: { // 隐藏X轴
            show: false
          },
          axisTick: { // 隐藏X轴刻度值
            show: false
          }
        },
        yAxis: {
          type: 'value',
          name:'单位：宗',
          axisLine: { // 隐藏Y轴 如果show：false可以到达效果则不需要设置lineStyle，反之就按照我的写
            show: true,
            lineStyle:{
              type:'dashed',
              color: '#CCCCCC'
            }
          },
          axisTick: { // 隐藏Y轴刻度值
            show: false
          }
        },

柱子颜色渐变和圆角

series: [
          {
            data: yData,
            stack:'amount',
            type: 'bar',
            barWidth: 11, // 柱子宽度
            itemStyle: { 
              normal: {
                // 渐变色
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#82CEA7'}, // 从上往下开始渐变
                        {offset: 0.5, color: '#68CB99'},
                        {offset: 1, color: '#3BC67F'}
                    ]
                ),
                // 圆角
                barBorderRadius:[2, 2, 2, 2]
              },
            },
        }]

柱子悬空效果

series: [
          // 使用一个辅助柱状图填充在最下面，然后设置为透明即可出现柱子距离坐标轴一段距离的效果
           {
               name:'辅助',
               type:'bar',
               stack: 'amount',
               itemStyle:{
                   normal:{
                       barBorderColor:'rgba(0,0,0,0)',
                       color:'rgba(0,0,0,0)'
                   },
                   emphasis:{
                       barBorderColor:'rgba(0,0,0,0)',
                       color:'rgba(0,0,0,0)'
                   }
               },
               data: [100, 100, 100] // 这种可以达到效果，但是效果不太好，悬空只能写死
           },
        }]

完整代码

// 柱图
    async initInefficientLandUseBar() {
      var params = new FormData();
      params.append("nf", this.params.nf);
      params.append("qy", this.params.qy);
      params.append("mjssks", this.params.mjssks);
      params.append("mjssjs", this.params.mjssjs);
      params.append("qlrmc", this.params.qlrmc);
      params.append("pageIndex", this.pageSetting.pageIndex);
      params.append("pageSize", this.pageSetting.pageSize);
      let barData = [];
      await this.$ajax.post(this.$api.getInefficientLandUseBarData, params, this).then((res) => {
        let {data, success} = res;
        if (success) {
          barData = data
        } else {
          this.$Message.error(data.message);
        }
      });
      let xData = [];
      let yData = [];
      barData.forEach(item => {
        xData.push(item.name);
        yData.push(item.value);
      })
      // let fzData = new Array(xData.length).fill(100);
      let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        xAxis: {
          type: 'category',
          data: xData,
          axisLabel: {    // X轴坐标数据旋转
            // interval: 0,   //这个一定要有，别忘记了
            rotate: 50,
            // borderWidth: 0
            // textStyle: {
            //     color:  '#000' , //坐标值得具体的颜色
            //     fontWeight: 'bold'
            // }
          },
          splitLine: { // 横向虚线
              show: true,
              lineStyle:{
                  type:'dashed'
              }
          },
          axisLine: { // 隐藏X轴
            show: false
          },
          axisTick: { // 隐藏X轴刻度值
            show: false
          }
        },
        yAxis: {
          type: 'value',
          name:'单位：宗',
          nameTextStyle: { // name的样式
              color: "#000"
          },
          splitLine: { // 纵向虚线
              show: true,
              lineStyle:{
                  type:'dashed'
              }
          },
          axisLine: { // 设置Y轴
            show: true,
            lineStyle:{
              type:'dashed',
              color: '#CCCCCC'
            }
          },
          axisTick: { // 隐藏Y轴刻度值
            show: false
          },
          axisLabel: {
              textStyle: {
                  color:  '#000' , //坐标值得具体的颜色
              }
          }
        },
        series: [
          // 使用一个辅助柱状图填充在最下面，然后设置为透明即可出现柱子距离坐标轴一段距离的效果
          // {
          //     name:'辅助',
          //     type:'bar',
          //     stack: 'amount',
          //     itemStyle:{
          //         normal:{
          //             barBorderColor:'rgba(0,0,0,0)',
          //             color:'rgba(0,0,0,0)'
          //         },
          //         emphasis:{
          //             barBorderColor:'rgba(0,0,0,0)',
          //             color:'rgba(0,0,0,0)'
          //         }
          //     },
          //     data: fzData
          // },
          {
            data: yData,
            stack:'amount',
            type: 'bar',
            barWidth: 11,
            itemStyle: { 
              normal: {
                // 渐变色
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#82CEA7'},
                        {offset: 0.5, color: '#68CB99'},
                        {offset: 1, color: '#3BC67F'}
                    ]
                ),
                // 圆角
                barBorderRadius:[2, 2, 2, 2]
              },
            },
        }]
      };
      let myChart = echarts.init(document.getElementById('qyBar'));
      myChart.setOption(option);
    },

最终图表效果

结束！欢迎指正！！！