Echarts数据可视化图表的简单配置

Echarts图表相关配置

• 先来看看一个例子的整体效果
  

• 下面是实现上方图示的相关配置

var option = {
	// 图表的标题
	title: {
		text: '一个简单的例子'
	},
    // 全局的颜色可以写在外面
    color: ['#3398DB'],
    // 配置图表的指示器
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        shadowStyle: {
          // 配置指示器的背景颜色
          color: 'rgba(194, 211, 255, 0.3)'
        }
      },
      // 配置指示器的背景颜色
      backgroundColor: 'rgba(39, 71, 105, 0.7)'
    },
    // 配置图表距离容器上下左右四个方向的距离
    grid: {
      top: '3%',
      left: '1%',
      right: '3%',
      bottom: '1%',
      containLabel: true
    },
    // 图表X轴相关的配置
    xAxis: {
      type: 'category',
      data: ['6.01', '6.02', '6.03', '6.04', '6.05', '6.06', '6.07'],
      axisLine: {
        lineStyle: {
          color: 'rgba(209, 230, 249, 0.7)'
        }
      },
      axisLabel: {
        textStyle: { //改变刻度字体样式
          color: '#ccc',
          fontSize: 12
        }
      }
    },
    // 图表Y轴相关的配置
    yAxis: {
      type: 'value',
      axisLine: {
        show: false
      },
      axisLabel: {
        color: '#ccc',
        fontSize: 12
      },
      axisTick: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: ['rgba(22, 126, 226, 0.2)'],
          type: 'dashed'
        }
      }
    },
    // 系列列表的相关配置，通过type属性指定类型
    series: [{
      name: '生产时长',
      type: 'bar',
      barWidth: 12,
      data: [5, 3, 11, 4, 4, 11, 3],
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [{
                offset: 0,
                color: '#00E3D2'
              },
              {
                offset: 0.5,
                color: '#A1F4EE'
              },
              {
                offset: 1,
                color: '#F8F8F8'
              },
            ]
          )
        }
      },
    }]
  }

接下来是一些具体的某些配置

1. 配置图表的标题，可以隐藏掉

title: {
		show: false, // 隐藏标题
		text: '一个简单的例子'
	}

2. 指示器的相关配置
   

tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
      shadowStyle: {
        // 配置指示器的阴影颜色
        color: 'rgba(194, 211, 255, 0.3)'
      }
    },
    // 配置指示器的背景颜色
    backgroundColor: 'rgba(39, 71, 105, 0.7)'
 }

3. 图例的相关配置
   

legend: {
		// 取消图例的展示，当然在图表配置的整个过程中不写legend属性也是可以达到不显示图例的效果的
		show: false,
		// 图例的名字
        name: '生产时长'
    },

4. 配置图表距离定义区域上、下、左、右各个方向的距离
   

 // 配置图表距离容器上下左右四个方向的距离
    grid: {
      top: '10%',
      left: '10%',
      right: '10%',
      bottom: '10%',
      // 这个开启则图表会等比例拉伸
      containLabel: true
    },

5. 图表的系列相关配置，简单来说就是配置图表的类型
   

// 系列列表的相关配置，通过type属性指定类型
    series: [{
      // 柱状图
      type: 'bar',
      barWidth: 12,
      // 柱状图的数据展示
      data: [5, 3, 11, 4, 4, 11, 3],
      // 配置图表的风格
      itemStyle: {
        normal: {
          // 本例子配置的是一个柱状图 柱子的渐变色效果, 就如上面的效果图所示
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [{
                offset: 0,
                color: '#00E3D2'
              },
              {
                offset: 0.5,
                color: '#A1F4EE'
              },
              {
                offset: 1,
                color: '#F8F8F8'
              },
            ]
          )
        }
      },
    }]

注：

本例子相对较简单，想配置出更好的图表或符合自己需求的图表可以查看官方的教程和文档
这是链接：官方地址