ECharts常见图表样式需求总结

因为不熟悉，每次需要画图表的时候我都要去官网查文档，并且 ECharts 官网老是打不开，效率很低，所以就写了一个简单的 ECharts 图表样式汇总。

安装及引入

npm install echarts

// 引入echarts
import ECharts from "echarts";

常用配置

柱状图/折线图

<div id="chart" style="width: 100%; height: 400px"></div>
<script>
  let chartsInstance = ECharts.init(document.getElementById("chart"));
  let option = {
    legend: {
      show: true, // 图列组件展示开关
      data: [{ name: "成本" }, { name: "收入" }],
      bottom: "0%",
      right: "0%",
    },
    tooltip: {
      show: true, // 提示框展示开关，一个跟随鼠标展示数据详细信息的框
    },
    grid: {
      left: "20%",
      top: "20%",
      right: "0%",
      bottom: "0%",
      containLabel: true, // 是否包含各种标签，否则当left,right,top,bottom为0%时会隐藏标签。
    },
    xAxis: {
      show: true, // x轴展示开关
      boundaryGap: true, // 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。默认为true
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      axisPointer: {
        show: true, // 坐标轴指示器，跟随鼠标移动的分割线
        type: "shadow", // 指示器类型，line,shadow
        label: {
          show: true, // 指示器文本标签展示开关
          // 其他和axisLabel配置一致
        },
        lineStyle: {
          // 其他和lineStyle配置一致
        },
        shadowStyle: {
          // 其他和areaStyle配置一致
        },
      },
      axisLine: {
        show: true, // 轴线展示开关
        lineStyle: {
          color: "yellow", // 轴线颜色
          width: 3, // 轴线宽度
          opacity: 0.5, // 轴线透明度
          type: "dashed", // 轴线类型：solid,dashed,dotted
        },
      },
      axisTick: {
        show: true, // 刻度线展示开关
        alignWithLabel: true, // 类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
        inside: false, // 刻度线向内还是向外延申
        length: 10, // 刻度线长度
        lineStyle: {
          color: "green", // 轴线颜色
          width: 5, // 轴线宽度
          opacity: 1, // 轴线透明度
          type: "solid", // 轴线类型：solid,dashed,dotted
        },
      },
      axisLabel: {
        show: true, // 刻度标签展示开关
        color: "gold", // 刻度标签颜色
        fontSize: 16, // 刻度标签字体大小
        rotate: 45, // 刻度标签旋转的角度，-90 ~ 90
        formatter: (value, index) => `${value}-d${index}`,
      },
      splitLine: {
        show: true, // 分割线展示开关
        lineStyle: {
          color: "white", // 轴线颜色
          width: 1, // 轴线宽度
          opacity: 1, // 轴线透明度
          type: "dashed", // 轴线类型：solid,dashed,dotted
        },
      },
      splitArea: {
        show: true, // 分隔区域展示开关
        areaStyle: {
          color: ["red", "green", "blue"],
          opacity: 0.1,
        },
      },
    },
    yAxis: {
      type: "value",
      show: true, // y轴展示开关
      axisPointer: {
        show: true, // 坐标轴指示器，跟随鼠标移动的分割线
        type: "line", // 指示器类型，line,shadow
        label: {
          show: true, // 指示器文本标签展示开关
          // 其他和axisLabel配置一致
        },
        lineStyle: {
          // 其他和lineStyle配置一致
        },
        shadowStyle: {
          // 其他和areaStyle配置一致
        },
      },
      axisLine: {
        show: true, // 轴线展示开关
        lineStyle: {
          color: "blue", // 轴线颜色
          width: 3, // 轴线宽度
          opacity: 0.5, // 轴线透明度
          type: "dotted", // 轴线类型：solid,dashed,dotted
        },
      },
      axisTick: {
        show: true, // 刻度线展示开关
        alignWithLabel: true, // 类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
        inside: false, // 刻度线向内还是向外延申
        length: 10, // 刻度线长度
        lineStyle: {
          color: "orange", // 轴线颜色
          width: 5, // 轴线宽度
          opacity: 1, // 轴线透明度
          type: "solid", // 轴线类型：solid,dashed,dotted
        },
      },
      axisLabel: {
        show: true, // 刻度标签展示开关
        color: "black", // 刻度标签颜色
        fontSize: 14, // 刻度标签字体大小
        rotate: 45, // 刻度标签旋转的角度，-90 ~ 90
        formatter: (value, index) => `${value}-i${index}`,
      },
      splitLine: {
        show: true, // 分割线展示开关
        lineStyle: {
          color: "black", // 轴线颜色
          width: 2, // 轴线宽度
          opacity: 1, // 轴线透明度
          type: "dotted", // 轴线类型：solid,dashed,dotted
        },
      },
      splitArea: {
        show: true, // 分隔区域展示开关
        areaStyle: {
          color: ["black", "white"],
          opacity: 0.2,
        },
      },
    },
    series: [
      {
        name: "成本", // 配合legend
        data: [120, 200, 150, 80, 70, 110, 130],
        type: "bar",
        label: {
          show: true, // 图形上的文本标签展示开关
          position: "inside",
          color: "#ddd", // 颜色
          fontSize: 20, // 字体大小
          fontWeight: "normal",
        },
        itemStyle: {
          color: "cyan", // 柱状图颜色
          opacity: 0.8,
        },
      },
      {
        name: "收入", // 配合legend
        data: [34, 231, 45, 23, 68, 34, 65],
        type: "line",
        label: {
          show: true, // 图形上的文本标签展示开关
          position: "outside",
          color: "green", // 颜色
          fontSize: 14, // 字体大小
          fontWeight: "bold",
        },
        itemStyle: {
          // 折线连接处样式
          color: "yellow",
          opacity: 1,
        },
        lineStyle: {
          // 折线线段样式
          color: "red",
          opacity: 0.6,
        },
        areaStyle: {
          // 折线区域样式
          color: "orange",
          opacity: 0.5,
        },
      },
    ],
  };
  chartsInstance.setOption(option);
</script>

饼图

<div id="chart" style="width: 100%; height: 400px"></div>
<script>
  let chartsInstance = ECharts.init(document.getElementById("chart"));
  let option = {
    tooltip: {
      trigger: "item",
    },
    series: [
      {
        name: "Access From",
        type: "pie", // 饼状图类型
        radius: ["40%", "70%"], // 圆环的内半径、外半径
        center: ["55%", "55%"], // 饼图的中心（圆心）坐标，横坐标/纵坐标。
        roseType: "area", // 南丁格尔图，radius/area：前者数据越大，图元越大；后者和前者一样，除了图元圆心角都是一样的
        label: {
          show: true, // 圆环标签展示开关
          // 其他和axisLabel配置一致
          color: "blue",
          fontSize: 15,
          fontWeight: "bold",
        },
        labelLine: {
          show: true, // 圆环标签引导线展示开关
          length: 20, // 引导线第一段长度
          length2: 20, // 引导线第二段长度
          smooth: 0.3, // 引导线圆滑程度0~1,也可以true/false
          lineStyle: {
            // 其他和lineStyle配置一致
          },
        },
        itemStyle: {
          // 饼图单元样式
          borderColor: "#ccc", // 单元边框颜色
          borderWidth: 20, // 单元边框宽度
          borderType: "dashed", // 单元边框样式solid/dashed/dotted
        },
        emphasis: {
          // 高亮（hover）的样式
          label: {
            // 和series.[label]一致
          },
          labelLine: {
            // 和series.[labelLine]一致
          },
          itemStyle: {
            // 和series.[itemStyle]一致
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
        data: [
          {
            value: 1048,
            name: "Search Engine",
            selected: true, // 图元是否选中
            label: {
              // 和series.[label]一致
            },
            labelLine: {
              // 和series.[labelLine]一致
            },
            itemStyle: {
              // 和series.[itemStyle]一致
            },
            emphasis: {
              // 和series.[emphasis]一致
            },
          },
          {
            value: 735,
            name: "Direct",
            selected: false, // 图元是否选中
            label: {
              // 和series.[label]一致
            },
            labelLine: {
              // 和series.[labelLine]一致
            },
            itemStyle: {
              // 和series.[itemStyle]一致
            },
            emphasis: {
              // 和series.[emphasis]一致
            },
          },
          {
            value: 580,
            name: "Email",
            selected: false, // 图元是否选中
            label: {
              // 和series.[label]一致
            },
            labelLine: {
              // 和series.[labelLine]一致
            },
            itemStyle: {
              // 和series.[itemStyle]一致
            },
            emphasis: {
              // 和series.[emphasis]一致
            },
          },
          {
            value: 484,
            name: "Union Ads",
            selected: false, // 图元是否选中
            label: {
              // 和series.[label]一致
            },
            labelLine: {
              // 和series.[labelLine]一致
            },
            itemStyle: {
              // 和series.[itemStyle]一致
            },
            emphasis: {
              // 和series.[emphasis]一致
            },
          },
          {
            value: 300,
            name: "Video Ads",
            selected: false, // 图元是否选中
            label: {
              // 和series.[label]一致
            },
            labelLine: {
              // 和series.[labelLine]一致
            },
            itemStyle: {
              // 和series.[itemStyle]一致
            },
            emphasis: {
              // 和series.[emphasis]一致
            },
          },
        ],
      },
      {
        name: "Access From2",
        type: "pie", // 饼状图类型
        radius: ["10%", "30%"], // 圆环的内半径、外半径
        center: ["55%", "55%"], // 饼图的中心（圆心）坐标，横坐标/纵坐标。
        avoidLabelOverlap: false, // 是否启用防止标签重叠策略，默认开启。当将标签放到圆环的圆心时需要设置为false，
        label: {
          show: false,
          position: "center", // 标签的显示位置，outside(外部用引导线连接)/inside(图元内部)/center(圆心)
        },
        emphasis: {
          label: {
            show: true, // 配合series.[label.show = false]，可以实现鼠标hover图元时，圆心展示标签
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          {
            value: 1548,
            name: "Search Engine",
            selected: true, // 图元是否选中
          },
          {
            value: 775,
            name: "Direct",
            selected: false, // 图元是否选中
          },
          {
            value: 679,
            name: "Marketing",
            selected: false, // 图元是否选中
          },
        ],
      },
    ],
  };
  chartsInstance.setOption(option);
</script>

常用 API

渐变色

let gradientColor = new ECharts.graphic.LinearGradient(0, 0, 0, 1, [
  // 柱状图边框颜色
  {
    offset: 0,
    color: "#8DC0FD",
  },
  {
    offset: 1,
    color: "#8DC0FD88",
  },
]);

重置尺寸

chartsInstance.resize();

清空实例

// 清空当前实例，会移除实例中所有的组件和图表。
chartsInstance.clear();

// 销毁实例，销毁后实例无法再被使用。
chartsInstance.dispose();

参考

ECharts4 配置项
ECharts5 配置项
在 ECharts 中画一个带边框的渐变柱状图