echarts的使用

echarts的地址

下载

cnpm i echarts@4.6.0 --S

图表容器

首先，在 HTML 中定义有宽度和高度的容器

// 准备具有大小的容器
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
</script>

坐标轴

option = {
  // x轴
  xAxis: {
    // ...
  },
  // y轴
  yAxis: {
    // ...
  }
};

主要配置

常用的

series：
系列列表，每个系列通过 type 决定自己的图表类型
通俗的理解：图标数据，指定什么类型的图标，可以多个图表重叠。

xAxis：
直角坐标系 grid 中的 x 轴

boundaryGap:
坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。

yAxis：
直角坐标系 grid 中的 y 轴

grid：
直角坐标系内绘图网格。

title：
标题组件

tooltip：
提示框组件

legend：
图例组件

color：
调色盘颜色列表

stack：
数据堆叠，同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。

使用方法

就以堆积面积图为例

<div id="main" style="width:750px;height:400px;"></div>
import echarts from 'echarts'
mounted(){
	// 初始化实例对象 echarts.init(dom容器)
	var myChart = echarts.init(document.getElementById("main"));
	// 指定配置项和数据
	var option = {
      title: {
        text: "Stacked Area Chart",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },
      legend: {
        data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: "Email",
          type: "line",
          stack: "Total",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: "Union Ads",
          type: "line",
          stack: "Total",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: "Video Ads",
          type: "line",
          stack: "Total",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [150, 232, 201, 154, 190, 330, 410],
        },
        {
          name: "Direct",
          type: "line",
          stack: "Total",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [320, 332, 301, 334, 390, 330, 320],
        },
        {
          name: "Search Engine",
          type: "line",
          stack: "Total",
          label: {
            show: true,
            position: "top",
          },
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [820, 932, 901, 934, 1290, 1330, 1320],
        },
      ],
    };
    // 将配置项设置给echarts实例对象，使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
}