echarts里面常用的属性

option = {
    tooltip:{ //提示框浮层
        // position:[10,10], //默认是在同一个地方的
        formatter:'{c}',  //{a} 系列名 series[0].name {b} 横坐标 {c} 纵坐标
        // backgroundColor:'blue', //背景颜色
    },
    legend:{
        data:['良率'] //图形顶部的标签 点击可显示隐藏整条线  必须与series[index]内的name同名
    },
    xAxis: {
      type: 'category', //xAxis轴类型
      data: ['08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '00:00', '02:00', '04:00', '06:00'],
      splitLine: { show: false },  //坐标轴中间的分割线 隐藏
      axisLabel: {
        color: '#79a5a5'
      },        //坐标轴刻度标签
      axisLine: { show: false },   //坐标轴轴线 隐藏
      axisTick: { show: false }    //坐标轴刻度 隐藏
    },
    yAxis: {
      type: 'value',
      name: '良率 (%)',   //y轴 名字
      nameTextStyle: {
        color: '#79a5a5'  //y轴 名字颜色
      },
      splitLine: { show: false }, 
      axisLabel: {
        color: '#79a5a5'
      },
      axisLine: { show: false },
      axisTick: { show: false },
      min: 0,
      max: 100,
    //   splitNumber:5 //分割段数
    },
    series: [{
      name:'良率',
      data: [90, 95, 90, 91, 96, 81, 91, 92, 78, 96, 91, 91],//数据
      type: 'line',
      symbol: 'pin', //数值点的形状
      symbolSize:8, //数值点的大小
      symbolRotate:180, //数值点的旋转角度
      showSymbol:true, //数值点的显示隐藏
      hoverAnimation:true, //数值点hover是否有动画
    //   stack:'',//可堆叠前面的数值到最后一项
      label: {
        normal: {
          show: true  //数值点的数据
        }
      },
      lineStyle: {
        color: '#c7e821'  //折线的样式  颜色
      },
      itemStyle: {
        color: ({ data }) => {
          if (data <= 80) { return '#ff0000 ' }    //不同点的颜色
          return '#c7e821'
        }
      },
      markLine: {   //划线
        symbol: 'none',   //取消最后的箭头
        data: [   
          [{
            value: 80,   //线的数值
            lineStyle: {  //线样式  颜色
              color: '#36dcdc'   
            },
            label: {    //线标签   
              color: '#000',  //颜色
              position: 'middle',  //位置
              formatter: '{c} %',   //格式
              backgroundColor: '#36dcdc',   //背景色
              padding: 5,  
              borderRadius: 5 
            },
            coord: ['08:00', 80]  //起点 [横坐标,数值]
          }, {
            coord: ['06:00', 80]//终点 [横坐标,数值]
          }]
        ]
      },
      areaStyle: {  //区域填充样式
        color: {  //颜色
          type: 'linear',  
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: '#505E0D' // 0% 处的颜色
          }, {
            offset: 1, color: '#171A14' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        }
      }
    }]
};

猜你喜欢

转载自blog.csdn.net/qq_39039128/article/details/87938071