Echarts常用配置项说明

主要配置：`series` `xAxis` `yAxis` `grid` `tooltip` `title` `legend` `color`

• series
•   - 系列列表。每个系列通过 `type` 决定自己的图表类型
•   - 大白话：图标数据，指定什么类型的图标，可以多个图表重叠。
• xAxis：直角坐标系 grid 中的 x 轴
•  boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
• yAxis：直角坐标系 grid 中的 y 轴
• grid：直角坐标系内绘图网格。
• title：标题组件
• tooltip：提示框组件
• legend：图例组件
• color：调色盘颜色列表

 

柱状图

x轴设置

1.x轴线是否显示

xAxis: {
    show:false,
},

2.x轴的刻度线是否显示

  xAxis: {
    axisTick: {
      show: false
    }
  }

3.x轴的字体颜色和大小

  xAxis: {
    axisLabel: {
      color: 'red',
      fontSize: '12'
    }
  },

柱子的配置

1.柱子的颜色

var option = {
  color:"#ccc",
};

2.柱子的宽度

  series: [
    {
      barWidth: '35%',
    }
  ]

3.柱子的圆角

series: [
    {
      itemStyle: {
        barBorderRadius: 5
      }
    }
  ]

折线图

1.是否显示边框

grid: {
  show: true,  //是否显示边框
  borderColor: "#012f4a",  //边框颜色
 },

2.是否把线圆滑显示

        series: [
            {
                smooth: true, 
            }
        ]

3.y轴分割线虚线显示

        yAxis: {
            splitLine: {
                lineStyle: {
                    color: "#012f4a",
                    type: "dotted"  //分割线改成虚线
                }
            }
        },