echarts 相关

微笑小土豆

已于 2024-06-03 14:27:53 修改

阅读量77

点赞数

分类专栏： echarts 文章标签： echarts 前端 javascript

于 2023-02-27 15:32:28 首次发布

本文链接：https://blog.csdn.net/M781101/article/details/129236925

版权

echarts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

颜色渐变

 color:new echarts.graphic.LinearGradient(
            0,
            1,
            0,
            0,
            [
              {
                offset: 0,
                color: '#4E6783',
              },
              {
                offset: 1,
                color: '#A7D6EC',
              },
            ],
            false
          ),

轴设置

   xAxis: [{
            type: 'category',
            data: ['第一阶段', '第二阶段', '第三阶段', '第四阶段'],
            axisTick: {
              show: false,//轴刻度
            },
            splitLine: {
              show: true,//内容部分刻度显示
              lineStyle:{
                type:'dashed',    //设置网格线类型 dotted：虚线   solid:实线
                color: "#192935"
              },
            },
            axisLine: {
              show: true,//x轴线
              lineStyle:{
                color: "#192935"
              },
            },

            axisLabel: {//显示文字设置
              show: true,
              rotate : 30,//x轴文字显示倾斜
              textStyle: {
                color: '#83C3DB',

              },
              padding: 10
            },
          }],

边距设置

 grid: {
            top: '10%',
            left: '5%',
            right: '5%',
            bottom: '15%',
            containLabel: true
          },

柱子宽度和圆角设置

   series: [
          {
            name: "执行中",
            type: "bar",
            stack: "total",
            data: [12, 65, 85, 61, 86],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#A7D6EC" },
              { offset: 1, color: "#4E6783" },
            ]),
            barWidth: 4,
            itemStyle: {
              borderRadius: 2,
            },
            label: {
              show: true,
              color: "#A7D6EC",
              offset: [0, -15],
              fontFamily:'DIN Next LT Pro',
              fontWeight: 0,
            },
          },]

横向柱状图

yAxis: {
            show:false,
            type: 'category',//坐标轴类型：类目轴
          },

图显设置

  legend: {
    top: "0%",
    right: '10%',
    itemHeight: 9, //高度
    itemWidth: 50, //宽度
    itemGap: 20,
    icon: 'roundRect',
    textStyle: {
      color: "#90979c",
    },
    data: ["燃气泄漏历史曲线", "震动报警历史曲线"],
  },

图例文字换行

‘

   formatter: function (name) {
                for (let i = 0; i < curArr.length; i++) {
                  if(curArr[i].name==name){
                    return name + ' \n' + curArr[i].value;
                  }
                }
              },

主要是"/n"

轴文字转换添加百分比

    axisLabel: {
      color: "#83C3DB",
      fontSize: 12,
      fontFamily: "Source Han Sans SC",
      formatter: function (e) {
        return e + "%";
      },
    },