echarts修改横坐标颜色-Toy模板网

这篇具有很好参考价值的文章主要介绍了echarts修改横坐标颜色。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

echart修改一些配置项,经常会用到经常忘记,这里记录一下!

1.修改横纵坐标的颜色

echarts修改横坐标颜色

看代码:

    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.饼图的数值在内部百分百显示:

echarts修改横坐标颜色

 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: `{d}%`, // 格式化数值百分比输出
              textStyle: {
                //数值样式
                color: '#fff',
                fontSize: 12,
                // fontWeight: 100,
              },
            },
          },
        },
      ],
    };

3.横坐标标题过长显示省略号:

echarts修改横坐标颜色

  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',
                },
              },
            },
          ],

文章来源地址https://www.toymoban.com/news/detail-513437.html

到了这里，关于echarts修改横坐标颜色的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！