Echart常用属性

grid（图表位置）

grid: { // 图表位置
        left: '40px',
        right: '30px',
        top: '80px',
        bottom: '40px'
      },

tooltip（鼠标移入显示）

tooltip: {
          trigger: 'axis',
          formatter: '{b0}:00 <br /> {c0}ml',
          backgroundColor: "#071f50", //设置背景颜色
          textStyle: {
            color: "white" //设置文字颜色
          },
          borderColor: "#09548b", //设置边框颜色
        },

title（标题）

title: {
	text: '并发呼叫', // 主标题 
	textStyle: { // 标题样式
      color: '#000',
      fontSize: 15,
    },
    top: '20px',
    left: '20px'
},

legend

legend: {
  data: ['增长', '活跃'],
  top: '10px',
  right: '10px',
  icon: 'circle',
  itemHeight: 10, // 控制小圆点的大小
  orient: 'horizontal', // 排列方式 horizontal（水平） vertical（垂直） 
  textStyle: {
    color: '#C4E5FA', // 文字颜色
    fontSize: 14,
  },
  padding: 50, // 整体padding
  itemGap: 20 // 每项间距
},

yAxis（y轴）

yAxis: {
    show: false, // 显示隐藏 true false
    name: '信道',// 坐标轴名称
    interval: 2 / 5, // 强制设置坐标轴分割间隔
    splitNumber: 5, // 坐标轴的分割段数
    max: 2,
    boundaryGap: false // 不留白，从原点开始
    axisLine: { // 坐标轴
      lineStyle: { // 坐标轴样式
        color: '#ddd'
      }
    },
    axisLabel: {
      interval: 0, // 为了让轴上显示全
      rotate: 15, //显示全后重叠，调整角度
      textStyle: {
        color: 'rgba(0,0,0,.8)',  //更改坐标轴文字颜色
      }
    },
    splitLine: { // 网格线
      show: false, // 显示隐藏 ture false
      lineStyle: { // 网格线样式
         type: 'dashed' // solid dashed dotted
      }
    },
    axisTick: { // 刻度
       show: false // 控制刻度的显示与隐藏
    },
}

折线图

series: [{
   data: dataData,
   type: 'line',
   smooth: false, // 光滑曲线或折线
   symbol: 'circle', // 设定为实心点
   itemStyle: {
     normal: {
       color: '#DB586A', // 改变折线点的颜色
     },
   },
   lineStyle: {
     width: 1, // 折线粗细
     color: '#DB586A', // 折线颜色
   }
   areaStyle: { // 阴影区域
     opacity: 0.8,
     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
       offset: 0,
       color: 'rgba(158, 175, 239, 0.5)'
     }, {
       offset: 1,
       color: 'rgba(158, 175, 239, 0.1)'
     }])
   },
 }]

柱状图

series: [{
  data: [4, 5, 2, 6, 4],
  type: 'bar',
  barWidth: 6,
  label: { // 在柱状条上显示数字
    show: true,
    position: 'insideTop'
  },
  itemStyle: {
    normal: {
      barBorderRadius: [0, 20, 20, 0], // 柱状图圆角
      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ // 柱状图渐变色
        offset: 0,
        color: 'rgba(69, 176, 255, 0.2)'
      }, {
        offset: 1,
        color: '#45B0FF'
      }]),
    }
  },
}]

环形图

title: { // 用title显示环中间固定的文字
   text: `隐患排查总量\n183处`, // \n 换行
   subtext: '预警总数', // 子标题
   textAlign: 'center', // 字体居中对齐
   top: 'center',
   left: 'center',
   textStyle: {
     color: '#fff',
     fontSize: 14,
     lineHeight: 20
   }
   subtextStyle: { // 子标题样式
   	 color: '#fff',
     fontSize: 14,
   }
},
series: [
          {
            type: 'pie',
            radius: ['45%', '70%'],
            center: ['30%', '50%'], // 环形图中心点
            label: {
              show: false, // 隐藏环形中间的文字
            },
            silent: 'ture', //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
	        },
            data: [
              { value: 1048, name: '套餐一（38%）' },
              { value: 735, name: '套餐二（38%）' },
              { value: 580, name: '套餐三（38%）' },
              { value: 484, name: '套餐四（38%）' },
              { value: 300, name: '套餐五（38%）' }
            ]
          }
        ]