ECharts

安装

npm install echarts --save

引入

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
......
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);

export default echarts;

基本概念

初始化

<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
  // 默认初始化后echart图表大小即元素大小
  var myChart = echarts.init(document.getElementById('main'));
  // 手动指定大小
  var myChart = echarts.init(document.getElementById('main'), null, {
    width: 600,
    height: 400
  });
  // 响应容器大小变化
  window.onresize = function() {
    myChart.resize();
  };
  // 正确销毁
  myChart.dispose();
</script>

绘制

// 参数绘制
myChart.setOptions(options);
// 更新参数
myChart.setOptions({
  series: { ... }
});

样式

颜色主体(Theme)

指定主题实现更改全局样式

var chart = echarts.init(dom, 'dark');

支持主题编辑器自定义主题，在项目中加载注册 echarts.registerTheme('myTheme', JSON.parse(themeJSON));

调色盘

预声明颜色集，图形、系列自动匹配颜色取值；

options = {
    color: ['#cecece', ...],
    series: [
        {type: 'bar', color: ['#c0c0c0', ...]},
        {type: 'pie', color: ['#cccccc', ...]},
    ]
}

样式配置项

options配置的样式项：itemStyle, lineStyle, areaStyle, label 对应图形元素的颜色、线宽、点的大小、标签的文字、标签的样式；

高亮样式(emphasis)

emphasis: {
    itemStyle: {
      color: 'blue'  // 高亮时点的颜色。
    },
    label: {
      show: true,
      formatter: 'This is a emphasis label.' // 高亮时标签的文字。
    }
}

数据

数据集

默认系列(series)、x/yAxis轴都提供了data字段控制图表中可变的数据，这种分割的结构适用于超大、定制的图表数据；在基于原始数据映射的图标数据下，推荐全局下的数据集(dataset)：

// 数据形式  
dataset: {
    source: [
      // 第一列描述x轴相关(注意x轴不代表xAxis)  后续每列描述对应series：第一列对应第一series
      ['product', '2015', '2016', '2017'],
      ['Matcha Latte', 43.3, 85.8, 93.7],
      ['Milk Tea', 83.1, 73.4, 55.1],
      ...
    ]
  },
// 对象形式
dataset: {
    imensions: ['product', '2015', '2016', '2017'], // 描述x轴相关
    source: [    // 描述series系列
      { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },
      { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },
      ...
    ]
}

高级：seriesLayoutBy 设置系列对应x/y dimension 维度 encode 自定义映射

数据转换

数据集决定了数据取用来源与取用映射，数据转换控制取用哪些

坐标轴

轴线 axisLine、刻度axisTick、轴标签axisLabel、轴标题构成了坐标轴

图例legend

配置

Axis

axisLabel

interval：强制设置坐标轴label分割间隔
minInterval：坐标轴最小间隔大小，值为1保证刻度为整数（类目轴无效）

splitNumber： 坐标轴分割段数（类目轴无效），计算实际段数参考改值会有偏差

grid

containLabel：grid 区域是否包含坐标轴标签，值为 true 有效防止标签溢出

series

type： 系列类型，如line 折线图，pie 饼图

smooth： 是否开启平滑曲线取代折线

legend

selected： series.name 组成的勾选图例集合（未勾选series会被隐藏）

trigger： 触发类型，item(default)/axis/none

axisPointer： 指示器配置项

示例

时间类别图

export const xAxis = {
  type: "category",
  boundaryGap: false,
  data: [],
  axisLine: { show: false },
  axisTick: { show: false },
};
export const yAxis = {
  type: "value",
  minInterval: 1,
  splitLine: { lineStyle: { type: "dashed" } },
};
export const grid = {
  top: "12%",
  bottom: "10%",
  left: "3%",
  right: "4%",
  containLabel: true,
};
export const tooltip = { trigger: "axis" };
export const legend = {
  show: true,
  itemGap: 24,
  right: 0,
  icon: "path://M2 0C0.895431 0 0 0.89543 0 2V12C0 13.1046 0.89543 14 2 14H12C13.1046 14 14 13.1046 14 12V2C14 0.895431 13.1046 0 12 0H2ZM9.34169 4.60912C9.53037 4.3858 9.86958 4.3713 10.0766 4.57771L10.4283 4.92832C10.6126 5.11202 10.6252 5.40635 10.4572 5.60511L7.27953 9.36617L7.30525 9.39302L6.99174 9.7068L6.71249 10.0373C6.63935 10.1239 6.54357 10.1791 6.44165 10.2022C6.25749 10.2773 6.03787 10.2378 5.8915 10.0849L4.04029 8.15181C3.85227 7.95547 3.85557 7.64489 4.04771 7.45258L4.40095 7.09905C4.59918 6.90065 4.92179 6.90408 5.11577 7.10664L6.23981 8.28043L9.34169 4.60912Z",
};
export const series = {
  name: "",
  type: "line",
  smooth: true,
  showSymbol: false,
  symbolSize: 2,
  data: [],
};
export const initChart = (ele) => {
  const chart = echarts.init(ele);
  const option = cloneDeep({
    xAxis,
    yAxis,
    grid,
    tooltip,
    legend,
    series,
  });
  chart.setOption(option);
  window.addEventListener("resize", chart.resize);
  return chart;
}; 
export const destroyChart = (chart) => {
  window.removeEventListener("resize", chart.resize);
  chart.dispose();
}

  const series = [
    { name: "访问次数", attr: "pv", data: null },
    { name: "访问人数", attr: "uv", data: null },
    { name: "中奖人数", attr: "lotteryUv", data: null },
  ];
  echart.setOption({
    legend: { data: series.map((serie) => serie.name) },
    xAxis: {
      data: data.map((point) => dayjs(point.date).format("YYYY/MM/DD")),
    },
    series: series.map((serie) => ({
      name: serie.name,
      type: "line",
      data: data.map((point) => point[serie.attr]),
    })),
  });

时间线图

import dayjs from "dayjs";
import { echarts } from "@/plugins/echarts/echarts.js";
import { merge, cloneDeep } from "lodash-es";

export const color = ["#1F80FF", "#06BFB8", "#937EFF"];

export const xAxis = {
  type: "time",
  offset: 5,
  boundaryGap: ["3%", "3%"],
  splitNumber: 8,
  axisTick: { inside: true, length: 2 },
  axisLine: { lineStyle: { color: "#DFE1E5" } },
  axisLabel: {
    color: "#979797",
    formatter: function (value, index) {
      if (index === 0) return "{M}月{d}日";
      const date = dayjs(value);
      if (date.hour() === 0 && date.minute() === 0) return "{M}月{d}日";
      return "{H}:{mm}";
    },
  },
};
export const yAxis = {
  type: "value",
  offset: 10,
  minInterval: 1,
  axisLine: { lineStyle: { color: "#979797" } },
  splitLine: { lineStyle: { type: "dashed", color: "#EBEDF0" } },
};
export const axisPointer = {
  lineStyle: { color: "#DADADA" },
  z: 1,
};
export const grid = {
  top: "20%",
  bottom: "10%",
  left: "1%",
  right: "0%",
  containLabel: true,
};
export const tooltip = {
  trigger: "axis",
  axisPointer: {
    type: "line",
    axisLine: { lineStyle: { color: "#979797" } },
    label: {
      formatter: (params) => dayjs(params.value).format("YYYY-MM-DD HH:mm"),
    },
  },
};
export const legend = {
  show: true,
  itemGap: 24,
  left: 0,
  icon: "circle",
  itemWidth: 8,
  itemHeight: 8,
};
export const series = {
  name: "",
  type: "line",
  smooth: true,
  showSymbol: false,
  symbol: "circle",
  // symbol:
  //   "path://M2 0C0.895431 0 0 0.89543 0 2V12C0 13.1046 0.89543 14 2 14H12C13.1046 14 14 13.1046 14 12V2C14 0.895431 13.1046 0 12 0H2ZM9.34169 4.60912C9.53037 4.3858 9.86958 4.3713 10.0766 4.57771L10.4283 4.92832C10.6126 5.11202 10.6252 5.40635 10.4572 5.60511L7.27953 9.36617L7.30525 9.39302L6.99174 9.7068L6.71249 10.0373C6.63935 10.1239 6.54357 10.1791 6.44165 10.2022C6.25749 10.2773 6.03787 10.2378 5.8915 10.0849L4.04029 8.15181C3.85227 7.95547 3.85557 7.64489 4.04771 7.45258L4.40095 7.09905C4.59918 6.90065 4.92179 6.90408 5.11577 7.10664L6.23981 8.28043L9.34169 4.60912Z",
  symbolSize: 4,
  areaStyle: {
    color: {
      type: "linear",
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        { offset: 0, color: "transparent" },
        { offset: 1, color: "transparent" },
      ],
    },
  },
  data: [],
};

export const initTrendChart = (ele, initOptions) => {
  const chart = echarts.init(ele);
  const baseOptions = { color, xAxis, yAxis, axisPointer, grid, tooltip, legend, series };
  const option = merge(baseOptions, initOptions);
  chart.setOption(option);
  window.addEventListener("resize", chart.resize);
  chart.destroy = () => {
    window.removeEventListener("resize", chart.resize);
    chart.dispose();
  };
  return chart;
};

ECharts

一个基于 JavaScript 的开源可视化图表库

ECharts

安装

引入

基本概念

初始化

绘制

样式

数据

配置

Axis

grid

series

legend

tooltip

示例

时间类别图

时间线图

CATALOG

FEATURED TAGS

FRIENDS