ECharts使用说明（开发小组内部参考）

最新推荐文章于 2024-05-02 14:26:53 发布

Mojito_枫

最新推荐文章于 2024-05-02 14:26:53 发布

阅读量546

点赞数 2

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/Narutoy/article/details/125593976

版权

ECharts使用说明

1.引入echarts相关组件，在script标签下引入

 <script>------------此行不要复制
     
    // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
    import * as echarts from 'echarts/core';
    // 引入饼图图表，图表后缀都为 Chart
    import { PieChart } 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';

2.跟着官方文档来

注意事项：

1.在第一点中导入echarts的相关组件是放在script标签下

2.注册组件放在created中，初始化图表和配置项放在mounted中

**created:**在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

**mounted:**在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
created () {
        // 注册必须的组件
        echarts.use([
          TitleComponent,
          PieChart,
          TooltipComponent,
          GridComponent,
          DatasetComponent,
          TransformComponent,
          BarChart,
          LabelLayout,
          UniversalTransition,
          CanvasRenderer,
        ]);

      },
mounted () {
		// 初始化图表，设置配置项
		var myChart = echarts.init(document.getElementById('main'));
		let option ={
				myChart.setOption(option);
		}
		
      