Vue通过echarts实现数据图表化显示_vue.js_

import * as echarts from 'echarts'; 

// 引入 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 ]); // 接下来的使用就跟之前一样，初始化图表，设置配置项 var myChart = echarts.init(document.getElementById('main')); myChart.setOption({ // ... });

let chartDom = document.getElementById('main'); let myChart = echarts.init(chartDom); 

let chartDom = this.$el; let myChart = echarts.init(chartDom);