echarts修改橫坐標顏色簡單代碼示例

目錄 1.修改橫縱坐標的顏色 2.餅圖的數值在內部百分百顯示: 3.橫坐標標題過長顯示省略號: 補充知識：echarts 橫坐標傾斜 總結 echart修改一些配置項,經常會用到經常忘記,這里記錄一下

目錄

• ?1.修改橫縱坐標的顏色
• 2.餅圖的數值在內部百分百顯示:
• 3.橫坐標標題過長顯示省略號:
• 補充知識：echarts 橫坐標傾斜
• 總結

echart修改一些配置項,經常會用到經常忘記,這里記錄一下!

?1.修改橫縱坐標的顏色

?看代碼:

    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      grid: {
        // show:true,
        left: "5%",
        top: "10%",
        right: "2%",
        bottom: "8%",
        borderWidth: 1,
      },
      legend: {
        data: ['項目總數', '在建項目數', '開工項目數'],
        textStyle: {
          color: 'rgb(255,255,255,0.9)',
        },
      },
      xAxis: [
        {
          type: 'category',
          axisTick: { show: false },
          data: [
            '成都新經濟',
            '成都科學城',
            '龍潭工業機器',
            '成都新谷',
            '白鷺灣新經濟',
            '龍泉汽車城',
            '成都醫學城',
            '天府牧山數字',
          ],
          axisLine: {
            lineStyle: {
              color: '#fff',
            },
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#fff',
            },
          },
        },
      ],
    };

2.餅圖的數值在內部百分百顯示:

 const option = {
      tooltip: {
        trigger: 'item',
        backgroundColor: '#002870',
        // color: "pink",
        borderWidth: '0',
        textStyle: {
          color: '#fff',
          fontSize: 3,
        },
      },
      legend: {
        textStyle: {
          color: 'rgb(255,255,255,0.9)',
        },
        orient: 'vertical', //設置圖例的方向
        right: 5,
        top: 'center',
        // itemGap:30//設置圖例的間距
      },
      series: [
        {
          type: 'pie',
          radius: '90%',
          center: ['30%', '50%'],
          data: [
            { value: 1048, name: '成都新經濟活力區' },
            { value: 735, name: '成都科學城' },
            { value: 180, name: '龍潭工業機器人產業功能區' },
            { value: 484, name: '成都新谷' },
            { value: 300, name: '白鷺灣新經濟' },
            { value: 220, name: '龍泉汽車城' },
            { value: 590, name: '成都醫學城' },
            { value: 340, name: '天府牧山數字新城' },
          ],
          label: {
            normal: {
              show: true,
              position: 'inner', // 數值顯示在內部
              formatter: `cmimimf%`, // 格式化數值百分比輸出
              textStyle: {
                //數值樣式
                color: '#fff',
                fontSize: 12,
                // fontWeight: 100,
              },
            },
          },
        },
      ],
    };

3.橫坐標標題過長顯示省略號:

  xAxis: [
            {
              type: 'category',
              axisLabel: {
                interval: 0,
                 // rotate: 30
                 formatter: (value) => {
            if (value.length >= 4) {
                 value = (value.slice(0, 4)) + '...';
                }
               return value;
                 }},
              axisTick: { show: false },
              data:xData,
              axisLine: {
                lineStyle: {
                  color: '#fff',
                },
              },
            },
          ],

補充知識：echarts 橫坐標傾斜

你可以使用 ECharts 中的 xAxis.axisLabel.rotate 屬性來設置橫坐標標簽的旋轉角度，從而傾斜橫坐標。例如：

option = {
    // ...
    xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        axisLabel: {
            rotate: 45, // 設置旋轉角度，單位為度（°）
            interval: 0 // 設置橫坐標標簽的顯示間隔，默認為自動計算間隔
        }
    },
    // ...
};

以上代碼中的?rotate?屬性設置了旋轉角度為 45°，可以根據實際需求進行調整。同時，interval?屬性可以設置橫坐標標簽的顯示間隔，例如?interval: 2?表示每隔兩個標簽顯示一個標簽。

總結

到此這篇關于echarts修改橫坐標顏色的文章就介紹到這了,更多相關echarts修改橫坐標顏色內容請搜索技圈網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持技圈網！