ECharts

ECharts 简介

ECharts 官网

ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。ECharts 遵循 Apache-2.0 开源协议,免费商用。ECharts 兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等)及兼容多种设备,可随时随地任性展示。

绘制简单柱状图

STEP 1: 定义一个固定 with、height 的 DOM 容器

						
<body>
  <div id="chart-box" style="width:600px;height:400px;"</div>
</body>
						
					

STEP 2: 初始化一个 echarts 实例并绑定到 DOM 容器

						
<body>
  <div id="chart-box" style="width:600px;height:400px;"</div>

  <script type="text/javascript">
    var myChart = echart.init(document.getElementById('chart-box'));
  </script>
</body>
						
					

STEP 3: 通过 echarts 实例的 setOption 方法配置需要的柱状图

						
<body>
  <div id="chart-box" style="width: 600px;height: 400px;"</div>

  <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('chart-box'));
    var option = {
      title: {
        text: "ECharts 柱状图"
      },
      tooltip: {},
      legend: {
        data: ['销量']
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]     
    };
    myChart.setOption(option);
  </script>
</body>
						
					

title

标题组件,包含主标题和副标题。

						

title: {
  id ...,
  show: true,
  text: '',
  link: '',
  target: 'blank',
  textStyle: {...},
  subtext: '',
  sublink: '',
  subtarget: 'blank',
  subtextStyle: {...},
  textAlign: 'auto', 
  textVerticalAlign: 'auto',
  triggerEvent: false,
  padding: 5,
  itemGap: 10,
  zlevel: 0,
  z: 2,
  left: 'auto',               //title 组件离容器左侧的距离
  top: 'auto',                //title 组件离容器上侧的距离。
  right: 'auto',
  bottom: 'auto',
  backgroundColor: 'transparent',
  borderColor: '#ccc',
  borderWidth: 0,
  borderRadius: 0,
  shadowBlur ...,
  shadowColor ...,
  shadowOffsetX: 0,
  shadowOffsetY: 0,
}
						
					

绘制简单折线图

https://echarts.apache.org/examples/zh/index.html#chart-type-line

						
<body>
  <div id="linechart-box" style="width: 600px;height: 400px;"></div>
  <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('linechart-box'));
    var option = {
      title: {
        text: "胜率图"
      },
      tooltip: {},
      legend: {
        data: ['胜率']
      },
      xAxis: {
        data: [1,2,3,4,5,6,7,8,9,10]
      },
      yAxis: {},
      series: [{
        name: '胜率',
        type: 'line',
        data: [50,60,76,65,75,85,90,83,78,60]
      }]
    };
    myChart.setOption(option);
  </script>
</body>
						
					

x轴 xAxis

直角坐标系 grid 中的 x 轴,一般情况下单个 grid 组件最多只能放上下两个 x 轴,多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。

						

xAxis: {
  id ...,                        //x轴的ID
  show: true,
  gridIndex: 0,
  position ...,
  offset: 0,
  realtimeSort: false,
  sortSeriesIndex: 0,
  type: 'category',              //坐标轴类型
  name ...,                      //坐标轴名称
  nameLocation: 'end',
  nameTextStyle: {...},
  nameGap: 15,
  nameRotate ...,
  inverse: false,
  boundaryGap ...,
  min ...,                      //坐标轴刻度最小值
  max ...,                      //坐标轴刻度最大值
  scale: false, 
  splitNumber: 5,               //坐标轴刻度间隔
  minInterval: 0,               //自动计算的坐标轴最小间隔
  maxInterval ...,           
  interval ...,
  logBase: 10,
  silent: false,
  triggerEvent: false,
  axisLine: {...},
  axisTick: {...},
  minorTick: {...},
  axisLabel: {...},
  splitLine: {...},
  minorSplitLine: {...},
  splitArea: {...},
  data: [{...}],
  axisPointer: {...},
  zlevel: 0,
  z: 0,			
}
						
					

type 坐标轴类型

type 属性值
属性值(string)说明
'value'数值轴,适用于连续数据。
'category'类目轴,适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取,或者可通过 xAxis.data 设置类目数据。
'time'时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。
'log'对数轴。适用于对数数据。

提示框组件 tooltip

提示框组件 tooltip 可以设置在多种地方:

  • 可以设置在全局,即 tooltip
  • 可以设置在坐标系中,即 grid.tooltip、polar.tooltip、single.tooltip
  • 可以设置在系列中,即 series.tooltip
  • 可以设置在系列的每个数据项中,即 series.data.tooltip
						

tooltip: {
  show: true,                    //是否显示提示框组件
  trigger: 'item',               //弹出提示框的触发类型
  axisPointer: {...},            //坐标轴指示器配置项 
  showContent: true,
  alwaysShowContent: false,
  triggerOn: 'mousemove|click',
  showDelay: 0,
  hideDelay: 100,
  enterable: false,
  renderMode: 'html',
  confine: false,
  appendToBody: false ,
  className ...,
  transitionDuration: 0.4,
  position ...,
  formatter ...,
  backgroundColor: 'rgba(50,50,50,0.7)',
  borderColor: '#333',
  borderWidth: 0,
  padding: 5,
  textStyle: {...},
  extraCssText ...,
  order: 'seriesAsc',	
}
						
					

axisPointer 坐标轴指示器配置项

						

axisPointer: {
  type: 'line',
  axis: 'auto',
  snap ...,
  z ...,
  label: {...},
  lineStyle: {...},
  shadowStyle: {...},
  crossStyle: {...},
  animation: true,
  animationThreshold: 2000,
  animationDuration: 1000,
  animationEasing: cubicOut,
  animationDelay: 0,
  animationDurationUpdate: 200,
  animationEasingUpdate: exponentialOut,
  animationDelayUpdate: 0,
}
						
					

系列 series

						
series: [{
  {type: line, ...},           //折线/面积图
  {type: bar, ...},
  {type: pie, ...},
  {type: scatter, ...},
  {type: effectScatter, ...},
  {type: radar, ...},
  {type: tree, ...},
  {type: treemap, ...},
  {type: sunburst, ...},
  {type: boxplot, ...},
  {type: candlestick, ...},
  {type: heatmap, ...},
  {type: map, ...},
  {type: parallel, ...},
  {type: lines, ...},
  {type: graph, ...},
  {type: sankey, ...},
  {type: funnel, ...},
  {type: gauge, ...},
  {type: pictorialBar, ...},
  {type: themeRiver, ...},
  {type: custom, ...},
}
						
					

折线/面积图 {type: line, ...}

echarts折线图不堆叠设置:

https://blog.csdn.net/qq_20757489/article/details/90603359

There is a chart instance already initialized on the dom:

https://blog.csdn.net/qq_26477073/article/details/84568668

						

{
  type: 'line',
  id ...,
  name ...,
  coordinateSystem: 'cartesian2d',
  xAxisIndex: 0,
  yAxisIndex: 0,
  polarIndex: 0,
  symbol: 'emptyCircle',
  symbolSize: 4,
  symbolRotate ...,
  symbolKeepAspect: false,
  symbolOffset: [0, 0],
  showSymbol: true,
  showAllSymbol: 'auto',
  legendHoverLink: true,
  stack ...,
  cursor: 'pointer',
  connectNulls: false,
  clip: true,
  step: false,                 //是否是阶梯线图
  label: {...},
  endLabel: {...},
  labelLine: {...},
  labelLayout: {...},
  itemStyle: {...}, 
  lineStyle: {...},
  areaStyle: {...},            //区域填充样式(设置后显示成区域面积图)
  emphasis: {...},
  blur: {...},
  select: {...},
  selectedMode: false,
  smooth: false,
  smoothMonotone ...,
  sampling ...,
  dimensions ...,
  encode ...,
  seriesLayoutBy: 'column',
  datasetIndex: 0,
  data: [{...}],
  markPoint: {...},           //图表标注
  markLine: {...},
  markArea: {...},
  zlevel: 0,
  z: 2,
  silent: false,
  animation: true,
  animationThreshold: 2000,
  animationDuration: 1000,
  animationEasing: linear,
  animationDelay: 0,
  animationDurationUpdate: 300,
  animationEasingUpdate: cubicInOut,
  animationDelayUpdate: 0,
  tooltip: {...},
}
						
					

step

step 属性值
属性值(string/boolean)说明
false缺省/默认值,不显示成阶梯线图。
true显示成阶梯线图。
'start'从当前间隔的开始位置到下个间隔的开始位置算作一个阶梯。
'middle'从当前间隔的中间位置到下个间隔的中间位置算作一个阶梯。
'end'从当前间隔的结束位置到下个间隔的结束位置算作一个阶梯。

markPoint

						

markPoint: {                   //标记点
  symbol: 'pin',               //记号类型
  symbolSize: 50,              //记号大小
  symbolRotate ...,            
  symbolKeepAspect: false,
  symbolOffset: [0, 0],
  silent: false,
  label: {...},
  itemStyle: {...},
  emphasis: {...},
  blur: {...},
  data: [{...}],
  animation: true,
  animationThreshold: 2000,
  animationDuration: 1000,
  animationEasing: cubicOut,
  animationDelay: 0,
  animationDurationUpdate: 300,
  animationEasingUpdate: cubicInOut,
  animationDelayUpdate: 0,	
}
						
					
						
series: [
  {
  	name: '胜率',
  	type: 'line',
  	data: [67, 78, 90, 85, 70],
  	markPoint: {
      symbol: 'pin',
      symbolSize: 20,
      data: [
        {
          type: 'max', 
          name: '最大值'
        },
        {
          type: 'min',
          name: '最小值'
        },
        {
          type: 'average',
          name: '平均值'
        }
      ]
    }
  }
]
						
					
symbol 标记图形属性值
属性值(string/function)说明
'circle'圆形。
'rect'矩形。
'roundRect'圆角矩形。
'triangle'三角形。
'diamond'菱形。
'pin'大头针。
'arrow'箭头。
'none'无。
data
	
						
data: [{               //标注的数据数组
  name: '' ,           //标注名称
  type ... ,           //特殊的标注类型,用于标注最大值最小值等
  valueIndex ... ,
  valueDim ... ,
  coord ... ,
  x ... ,
  y ... ,
  value ... ,
  symbol ... ,
  symbolSize ... ,
  symbolRotate ... ,
  symbolKeepAspect: false ,
  symbolOffset: [0, 0] ,
  itemStyle: {...} ,
  label: {...} ,
  emphasis: {...} ,
}
						
					
						
data: [
  {
    name: '最大值',
    type: 'max'
  }, 
  {
    name: '某个坐标',
    coord: [10, 20]
  }, 
  {
    name: '固定 x 像素位置',
    yAxis: 10,
    x: '90%'
  }, 
  {
    name: '某个屏幕坐标',
    x: 100,
    y: 100
  }
]
						
					
type 属性
属性值(string)说明
'min'最小值。
'max'最大值。
'average'平均值。

Step Line

Step Line

						
<div id="stepline-box" style="width: 600px;height: 400px;"></div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('stepline-box'));
  var option = {
    title: {
      text: 'Step Line'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['规则1', '规则2', '规则3', '规则4', '规则5']
    },
    xAxis: {
      type: 'value',
      min: 0,
      minInterval: 1
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '规则1',
        type: 'line',
        step: 'middle',
        data: [100, 85, 76, 65, 73, 84, 96]
      },
      {
        name: '规则2',
        type: 'line',
        step: 'middle',
        data: [100, 78, 69, 75, 83, 74, 66]
      },
      {
        name: '规则3',
        type: 'line',
        step: 'middle',
        data: [50, 65, 76, 85, 93, 94, 86]
      },
      {
        name: '规则4',
        type: 'line',
        step: 'middle',
        data: [50, 55, 66, 75, 83, 94, 96]
      },
      {
        name: '规则5',
        type: 'line',
        step: 'middle',
        data: [50, 68, 76, 65, 79, 84, 92]
      }
    ]
  }
</script>
						
					

visualMap 视觉映射

visualMap 是视觉映射组件,用于进行视觉编码,也就是将数据映射到视觉元素(视觉通道)。

						
var lineChart = echarts.init(document.getElementById('demo'));
var option = {
  title: {
    text: '视觉映射demo'
  },
  tooltip: {},
  legend: {
    data: ['胜率']
  }
  xAxis: {
      type: 'category',
      data: [1,2,3,4,5]
  },
  yAxis: {
      type: 'value'
  },
  series: [
    {
      name: '胜率',
      type: 'line',
      areaStyle: {},
      data: [60,65,76,83,92]
    }
  ],
  visualMap: [
    {
      type: 'piecewise',
      show: false,
      pieces: [
        {
          gte: 0,
          lt: 50,
          color: 'green'
        },
        {
          gte: 50,
          lte: 60,
          color: 'yellow'
        },
        {
          gt: 60,
          lte: 70,
          color: 'orange'
        },
        {
          gt: 70,
          lte: 80,
          color: 'red'
        },
        {
          gt: 80,
          lte: 90,
          color: 'purple'
        },
        {
      	  gt: 90,
      	  lte: 100,
      	  color: 'black'
        }
      ]
    }
  }
};
lineChart.setOption(option);
						
					

视觉元素可以是:

  • symbol: 图元的图形类别。
  • symbolSize: 图元的大小。
  • color: 图元的颜色。
  • colorAlpha: 图元的颜色的透明度。
  • opacity: 图元以及其附属物(如文字标签)的透明度。
  • colorLightness: 颜色的明暗度,参见 HSL。
  • colorSaturation: 颜色的饱和度,参见 HSL。
  • colorHue: 颜色的色调,参见 HSL。

visualMap 组件可以定义多个,从而可以同时对数据中的多个维度进行视觉映射。

visualMap 组件可以定义为分段型 visualMapPiecewise 或连续型 visualMapContinuous,通过 type 来区分。