一.安装echarts
在项目集成终端下载echarts
npminstallecharts--save
二.全局引入
创建/components/echarts/index.js
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。import*asechartsfrom"echarts/core"; /** 引入任意图表，这里引入的是柱状图and折线图图表（图表后缀都为 Chart） */import { BarChart, LineChart } from"echarts/charts"; // 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Componentimport { 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, LineChart, ]); // 导出exportdefaultecharts;
在main.js注册
importechartsfrom"./components/echarts/index.js"; Vue.prototype.$echarts=echarts;
在组件中使用
<template><div><divid="maychar"style="width: 100%; height: 400px;"></div></div></template><script>exportdefault { data () { return {}; }, mounted () { this.getCharts(); }, methods: { // 使用柱形图，关于其他配置可以去官网查看getCharts () { constchartBox=this.$echarts.init(document.getElementById("maychar")); constoption= { xAxis: { data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], }, yAxis: {}, series: [ { type: "bar", data: [23, 24, 18, 25, 27, 28, 25], }, ], }; chartBox.setOption(option); // 根据页面大小自动响应图表大小window.addEventListener("resize", function () { chartBox.resize(); }); }, }, }; </script>
