Vue使用ECharts做图表
2023-06-13 09:17:08 时间
什么是 ECharts?
Apache ECharts一个基于 JavaScript 的开源可视化图表库
官方地址:https://echarts.apache.org/zh/index.html
- npm安装 ECharts
$ npm install echarts
按需引入 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
]);
// 全局挂载,很重要!!!
Vue.prototype.$echarts = echarts
初始化一个 ECharts 图表
<template>
<div id="myChart">
</div>
</template>
<script>
export default {
name: "myChart-demo",
mounted () {
this.initEcharts()
},
methods: {
initEcharts(){
let echarts = require('echarts')
// 基于准备好的dom,初始化echarts实例
let myChart = echarts.init(document.getElementById('myChart'),null,{
width:400
height: 160
});
// 绘制图表
myChart.setOption({
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
});
},
}
}
</script>
<style scoped>
</style>
相关文章
- Vue生命周期函数执行顺序_生命周期函数
- Vue的引入与基本使用
- Vue中显示img图片,显示不出来怎么办?vue显示图片
- Vue substring截取字符串报错
- Vue(3)webstorm代码格式规范设置与vue模板配置
- vue-cli 初始----安装运行Vue项目
- new Vue的时候到底做了什么
- VUE双向绑定原理_vue的数据绑定怎么实现
- 你知道import Vue from 'vue' 吗?
- vue-cropper
- 当面试官问你Vue响应式原理,你可以这么回答他
- 「后端小伙伴来学前端了」Vue中学会使用Echarts生成各种各样的图表,得学学了,必须要会的基本操作了
- 合格vue开发者应该知道的面试题
- vue双向数据绑定的原理「建议收藏」
- vue + echarts 省份地图 以及打包后地图加载不出来(比较详细)「建议收藏」
- Vue分页导航_vue分页组件
- vue常用组件库_vue内置组件
- vue axios轮询更新echarts 页面崩溃问题
- Vue调试工具安装(vue devtools)
- 开心档之Vue教程2
- 写过vue自定义指令吗,原理是什么
- Vue 实现前后端分离,安全连接 MSSQL 数据库(vue 连接mssql)
- 使用Vue框架使用MSSQL数据库实现快速开发(vue mssql)
- 使用Vue技术从MSSQL中获取数据(vue获取mssql数据)
- Vue框架搭建在Redis之上的Web应用(vue请求redis)
- 优化网站性能,Vue搭配Redis缓存更加有效(vue使用redis缓存)