快捷導(dǎo)航

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

更新時間：2023年07月10日 11:40:37 作者：芒果沙冰喲

這篇文章主要給大家介紹了關(guān)于echarts修改橫坐標顏色的相關(guān)資料,在項?中常常會?到echarts的實例,根據(jù)不同的需求字體顏?需要變化,需要的朋友可以參考下

1.修改橫縱坐標的顏色

看代碼:

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

2.餅圖的數(shù)值在內(nèi)部百分百顯示:

 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', //設(shè)置圖例的方向
        right: 5,
        top: 'center',
        // itemGap:30//設(shè)置圖例的間距
      },
      series: [
        {
          type: 'pie',
          radius: '90%',
          center: ['30%', '50%'],
          data: [
            { value: 1048, name: '成都新經(jīng)濟活力區(qū)' },
            { value: 735, name: '成都科學(xué)城' },
            { value: 180, name: '龍?zhí)豆I(yè)機器人產(chǎn)業(yè)功能區(qū)' },
            { value: 484, name: '成都新谷' },
            { value: 300, name: '白鷺灣新經(jīng)濟' },
            { value: 220, name: '龍泉汽車城' },
            { value: 590, name: '成都醫(yī)學(xué)城' },
            { value: 340, name: '天府牧山數(shù)字新城' },
          ],
          label: {
            normal: {
              show: true,
              position: 'inner', // 數(shù)值顯示在內(nèi)部
              formatter: `wppm3vysvbp%`, // 格式化數(shù)值百分比輸出
              textStyle: {
                //數(shù)值樣式
                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 屬性來設(shè)置橫坐標標簽的旋轉(zhuǎn)角度，從而傾斜橫坐標。例如：

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

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