Echarts图表常用配置及实例

Echarts图表基础配置：

import * as echarts from 'echarts';
var myChart = echarts.init(要写入echarts的元素（div）);  //初始化
var option = {
	title: {   //这里的title可以在option里面配置；也可以不配置，在元素div外面再写元素，自己写title文字及样式
		text: 'echarts图表的标题'    
	},
	xAxis: {   //x轴
		 type: 'category',   //坐标轴的类型，默认是category
		 data: ['1', '2', '3', '4'],   //横轴的坐标值，是一个数组
		 axisTick: {   //坐标轴刻度
             show: false   //不显示坐标轴的刻度
         },
         axisLine: {   //坐标轴轴线
             show: false   //不显示坐标轴轴线
         },
         boundaryGap: ['5%', '5%']   //坐标轴两边留白（不配置的话，数据就会贴着纵轴开始显示，设置两边留白）
	},
	yAxis: {   //y轴
		name: '盈利',  //纵轴的名称
		axisTick: {   //坐标轴刻度
             show: false   //不显示坐标轴的刻度
         },
         axisLine: {   //坐标轴轴线
             show: false   //不显示坐标轴轴线
         },
	},
	series: [{   //图表数据以及数据线配置
		name: '上衣',   //由数据组成的这条线的名称（每一条线都应该有一个名称）
		type: 'line',  //表示是折线图
		showSymbol: false,   //折线图上面每个数据点（有一个小圈圈），不用显示出来
		data: ['40', '54', '54', '44', '123', '65'],   //线上的所有数据
	},{   //一条线对应一个对象
		name: '裙装',   //第二条数据线对应的名称
		type: 'line',
		data: ['100', '123', '133', '234']
	}],
	legend: {   //echarts图下方的图形标记
		data: ['上衣', '裙装']   //这里的data应该对应series里面，每一条数据线的name(必须对应才可以)
	}
}
option && myChart.setOption(option);

实例：

将折线图在y轴分段，不同的范围用不同的颜色展示：

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  grid: {   //设置图表距离图表边框的距离
    left: '3%',
    right: '4%',
    bottom: '20%',
    containLabel: true   //必须要有
  },
  xAxis: {   //x轴
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {   //y轴
    type: 'value'
  },
  series: [
    {
      data: [150, 50, 244, 190, 135, 147, 260],
      type: 'line'
    },
    {
      data: [50, 150, 74, 170, 105, 47, 200],
      type: 'line',
      color: 'rgb(0, 0, 0)',
      lineStyle: {
        width: 1  //折线的宽度
      }
    }
  ],
  visualMap: {    //视觉映射
    type: 'piecewise',   //分段型
    seriesIndex: 0,   //选择要分段的系列数据，这里选择第一条数据
    pieces: [   //自定义分段
      {
        gt: 0,  //>0
        lte: 90,   <=90
        color: 'rgb(116, 21, 219)'
      },
      {
        gt: 90,  // >90
        lte: 160,  //  <=160
        color: 'rgb(77, 119, 255)'
      },
      {
        gt: 160,   //  >160
        color: 'rgb(128, 255, 165)'
      }
    ]
  }
};

option && myChart.setOption(option);

效果：

将折线图以x轴进行分段，显示不同的颜色：

option = {
  grid: {
    left: '3%',
    right: '4%',
    bottom: '20%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 50, 244, 190, 135, 147, 260],
      type: 'line'
    }
  ],
  visualMap: {
    dimension: 0, //有这一个配置，才是以x轴分段
    seriesIndex: 0,
    pieces: [
      {
        gt: 0,
        lte: 2,
        color: 'rgb(116, 21, 219)'
      },
      {
        gt: 2,
        lte: 4,
        color: 'rgb(77, 119, 255)'
      },
      {
        gt: 4,
        color: 'rgb(128, 255, 165)'
      }
    ]
  }
};