echarts常用配置项整合之xAxis,yAxis

xAxis: {
      //类目轴
      type: 'category',
      boundaryGap: true,
      //设置x轴文字的每个字样式(对于yAxis同样适用)
      axisLabel: {
      show: false//默认使用true有的时候不需要,就可以设置成true
        textStyle: {
          show: true,
          fontFamily: '微软雅黑',
          color: "#fff",
          fontSize: '15',
        },
      },
    // 控制x轴的轴线显示与隐藏(对于yAxis同样适用)
       axisLine: {
        show: false, // 原来x轴的默认横线取消掉,重新设置
        lineStyle: {
          type: 'dashed', // 网格线样式
          //   dashOffset: 5
          color: 'rgba(255, 255, 255,0.3)'
        }
      },
    // 设置x轴竖着的每一列的线条样式(对于yAxis同样适用)
      splitLine: {
        show: false
        // lineStyle: {
        //   type: 'dotted', // 网格线样式
        //   //   dashOffset: 5
        //   color: 'rgba(255, 255, 255,0.3)'
        // }
      } // 不去除网格线
   //不展示坐标轴刻度
      axisTick: { show: false },
      data: Echartdata.xdata
    },
yAxis: {
      type: 'value',
      //让y轴上的每条横线显示并且是dashed类型
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',//类型和线条的颜色及透明度
          color: 'rgba(255, 255, 255,0.3)'
        }
      }
    },
折线图
series: [
      {
        name: '未戴安全帽',
        type: 'line',
        stack: 'Total',
        data: Echartdata.yyan
      },
      {
        name: '违规抽烟',
        type: 'line',
        stack: 'Total',
        data: Echartdata.ydai
      },
      {
        name: '未戴安全带',
        type: 'line',
        stack: 'Total',
        data: Echartdata.ydai
      },
      {
        name: '违规动火',
        type: 'line',
        stack: 'Total',
        data: Echartdata.yhuo
      },
      {
        //另加一个series,配置折线图的每个项的背景色
        data: [
          0, 0, 0, 0, 0, 0, 0
        ],
        type: 'bar',
        barWidth: 100, // 设置柱子的宽度
        //是否展示每根柱子的背景
        showBackground: true,
        backgroundStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(10, 50, 100, 0.2)'
          }, {
            offset: 1,
            color: 'rgba(3, 9, 37, 0.2)'
          }]),
        }
      },
      {
        //另加一个series,配置折线图的每个项的背景色
        data: [
          0, 0, 0, 0, 0, 0, 0
        ],
        type: 'bar',
        barWidth: 100, // 设置柱子的宽度
        //是否展示每根柱子的背景
        showBackground: true,
        backgroundStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(10, 50, 100, 0.2)'
          }, {
            offset: 1,
            color: 'rgba(3, 9, 37, 0.2)'
          }]),
        }
      },
    ]
		
柱图
series: [{
      type: 'line',
      data: testData.list?.people_24hour_nums,
      symbol: 'emptyCircle',
      symbolSize: 15,
      //折线图的每个点所连区域下的颜色渐变
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(58,77,233,0.8)'
        },
        {
          offset: 1,
          color: 'rgba(58,77,233,0.3)'
        }])
      },
      itemStyle: {
        normal: {
          // color: 'red',
          shadowBlur: 15,
          shadowColor: "rgba(0, 0, 0, .12)",
          shadowOffsetX: 2,
          shadowOffsetY: 2
          // shadowColor: 'blue',
          // shadowOffsetX: 10,
          // shadowOffsetY: 2
        }
      },

    },
    {

      //另加一个series,配置折线图的每个项的背景色
      data: [
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      ],
      type: 'bar',
      barWidth: 60, // 设置柱子的宽度
      //是否展示每根柱子的背景
      showBackground: true,
      //给柱子设置渐变色
      itemStyle: {
        normal: {
          // barBorderRadius: 20,
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
            offset: 1,
            color: '#082858',
          },
          {
            offset: 0.5,
            color: '#000F32',
          },
          {
            offset: 0.4,
            color: '#000F32',
          },
          {
            offset: 0.1,
            color: '#082858',
          },]),
        },
      },
      z: 1,
  
      backgroundStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(10, 50, 100, 0.2)'
        }, {
          offset: 1,
          color: 'rgba(3, 9, 37, 0.2)'
        }]),
      },
    }]
饼图
series: [{
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [20, 100],
      //调整饼图的位置,上下左右
      center: ['50%', '90%'],
      //调整饼状图的角度
      startAngle: 180,
      roseType: 'area',
      itemStyle: {
        borderRadius: 1
      },
      //设置提示的字
      label: {
        color: '#fff',
        fontSize: 12
      },
      // { value: 40, name: `30-40岁/${res.value}%` },
      //   { value: 38, name: '20-30岁' },
      //   { value: 32, name: '40-50岁' },
      //   { value: 30, name: '50-60岁' },
      //   { value: 23, name: '20岁以下' },
      //   { value: 19, name: '60岁以上' },

      // data: [
      //   // ...obj.arr,
      //   ...laObj.value,
      //   // ...gg,
      //   { value: 0, itemStyle: { normal: { color: "rgba(0,0,0,0)" } } },
      //   { value: 0, itemStyle: { normal: { color: "rgba(0,0,0,0)" } } },
      //   { value: 0, itemStyle: { normal: { color: "rgba(0,0,0,0)" } } },
      //   { value: 0, itemStyle: { normal: { color: "rgba(0,0,0,0)" } } },
      //   { value: 0, itemStyle: { normal: { color: "rgba(0,0,0,0)" } } },
      //   { value: 0, itemStyle: { normal: { color: "rgba(0,0,0,0)" } } },
      // ]
      data: c.value,
    }]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值