[vue]Echart使用手册

使用环境

之前是在JQuery阶段使用Echart，直接引入Echart的js文件即可，现在是在vue中使用,不仅仅时echarts包，还需要安装vue-echarts：

"vue": "^3.3.10",
"echarts": "^5.4.2",
"vue-echarts": "^6.6.2",

Echart的使用

Echart所有组件和图表类型

在vue中使用Echart发现在设置某些属性的时候，图上对应的测试项死活出不来。。。

然后翻找源代码发现，对于Echart中属性的使用，都需要注册–组件与对应类型图表

在使用过程中图表很容易猜测出来，柱图或者折线图，但是组件的名称就不太容易确定，又没有明确的文档说明，只能查看源码

以下是所有组件与图表类型，需要的时候注册对应的即可：

    var BUITIN_COMPONENTS_MAP = {
      grid: 'GridComponent',
      polar: 'PolarComponent',
      geo: 'GeoComponent',
      singleAxis: 'SingleAxisComponent',
      parallel: 'ParallelComponent',
      calendar: 'CalendarComponent',
      graphic: 'GraphicComponent',
      toolbox: 'ToolboxComponent',
      tooltip: 'TooltipComponent',
      axisPointer: 'AxisPointerComponent',
      brush: 'BrushComponent',
      title: 'TitleComponent',
      timeline: 'TimelineComponent',
      markPoint: 'MarkPointComponent',
      markLine: 'MarkLineComponent',
      markArea: 'MarkAreaComponent',
      legend: 'LegendComponent',
      dataZoom: 'DataZoomComponent',
      visualMap: 'VisualMapComponent',
      // aria: 'AriaComponent',
      // dataset: 'DatasetComponent',
      // Dependencies
      xAxis: 'GridComponent',
      yAxis: 'GridComponent',
      angleAxis: 'PolarComponent',
      radiusAxis: 'PolarComponent'
    };
    var BUILTIN_CHARTS_MAP = {
      line: 'LineChart',
      bar: 'BarChart',
      pie: 'PieChart',
      scatter: 'ScatterChart',
      radar: 'RadarChart',
      map: 'MapChart',
      tree: 'TreeChart',
      treemap: 'TreemapChart',
      graph: 'GraphChart',
      gauge: 'GaugeChart',
      funnel: 'FunnelChart',
      parallel: 'ParallelChart',
      sankey: 'SankeyChart',
      boxplot: 'BoxplotChart',
      candlestick: 'CandlestickChart',
      effectScatter: 'EffectScatterChart',
      lines: 'LinesChart',
      heatmap: 'HeatmapChart',
      pictorialBar: 'PictorialBarChart',
      themeRiver: 'ThemeRiverChart',
      sunburst: 'SunburstChart',
      custom: 'CustomChart'
    };

Echart 使用方法

import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { BarChart, LineChart, PieChart, ScatterChart } from "echarts/charts";
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, ToolboxComponent, MarkPointComponent, MarkLineComponent } from "echarts/components";

use([
  CanvasRenderer,//必须注册
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  ToolboxComponent,
  MarkPointComponent,
  MarkLineComponent,//需要展示该属性就需要注册
  BarChart,
]);

例如，上述代码中并不是案例都会用到MarkPointComponent,在设置图表选项中用到了该点才会需要注册。

以下是设置选项，option设置遵循Echart文档即可：

const barOps=reactive({
  title: {
    text: "柱图",
    left: "left"
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      crossStyle: {
        color: "#999"
      }
    }
  },
  legend: {
    data: ["条数", "金额"]
  },
  xAxis: [
    {
      type: "category",
      data: [
        "成功",
        "失败",
        "重试"
      ],
      axisPointer: {
        type: "shadow"
      }
    }
  ],
  yAxis: [
    {
      type: "value",
      name: "条数",
      min: 0,
      max: null,
      interval: 100000,
      axisLabel: {
        formatter: "{value}"
      }
    },
    {
      type: "value",
      name: "金额",
      min: 0,
      max: null,
      interval: 200000,
      axisLabel: {
        formatter: "{value} 元",
        rotate: "-45"
      }
    }
  ],
  series: [
    {
      name: "条数",
      type: "bar",
      data: [200,100,500]
    },
    {
      name: "金额",
      type: "bar",
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value;
        }
      },
      label: {
        show: true,
        formatter: "{@金额}",
        rotate: 90,
        position: ["50%", "50%"]
      },
      data:  [22200,1077770,5000]
    }
  ]
})

series中type设置的类型，就是需要注册的图表类型，其它barOps的属性基本都是组件，也是从这里确定你要注册的内容

<v-chart class="echarts" :option="barOps" :autoresize="true"></v-chart>
<style>
.echarts {
  width: 100%;
  height: 600px;
}
</style>

以上是图表的vue相关代码，设置还有非常重要的一点，在最开始的时候没有设置class="echarts",图表根本不展示，所以 Echart 一定要设置高度