网站维护内容及费用,东营做网站哪里好,如何做h5页面,WordPress能装ssr一.安装echarts
在项目集成终端下载echarts
npm install echarts --save
二.全局引入
创建/components/echarts/index.js
// 引入 echarts 核心模块#xff0c;核心模块提供了 echarts 使用必须要的接口。
import * as echarts from echarts/core;/** 引入任…一.安装echarts
在项目集成终端下载echarts
npm install echarts --save
二.全局引入
创建/components/echarts/index.js
// 引入 echarts 核心模块核心模块提供了 echarts 使用必须要的接口。
import * as echarts from echarts/core;/** 引入任意图表这里引入的是柱状图and折线图图表图表后缀都为 Chart */
import { BarChart, LineChart } 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,LineChart,
]);// 导出
export default echarts;
在main.js注册
import echarts from ./components/echarts/index.js;Vue.prototype.$echarts echarts;
在组件中使用
templatedivdiv idmaychar stylewidth: 100%; height: 400px;/div/div
/templatescript
export default {data () {return {};},mounted () {this.getCharts();},methods: {// 使用柱形图关于其他配置可以去官网查看getCharts () {const chartBox this.$echarts.init(document.getElementById(maychar));const option {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
