vue + echarts
2023-09-11 14:15:30 时间
1.安装echarts依赖
npm install echarts -S
或者使用国内的淘宝镜像:
安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用
cnpm install echarts -S
2.创建图表
全局引入
main.js
// 引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts
Hello.vue
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
3.mounted 中调用 (mounted 是 vue 的生命周期,表示挂载完毕,html 已经渲染)
mounted(){ this.$nextTick(function() { this.drawPie('myChart') }) }
4.组件
<template> <!--为echarts准备一个具备大小的容器dom--> <div id="myChart" style="width:300px;height:300px;"></div> </template> <script> export default { name: '', data () { return { charts: '', opinion:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'], opinionData:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ] } }, methods:{ drawPie(id){ this.charts = $echarts.init(document.getElementById(id)); this.charts.setOption({ tooltip: { trigger: 'item', formatter: '{a}<br/>{b}:{c} ({d}%)' }, legend: { orient: 'vertical', x: 'left', data:this.opinion }, series: [ { name:'访问来源', type:'pie', radius:['50%','70%'], avoidLabelOverlap: false, label: { normal: { show: false, position: 'center' }, emphasis: { show: true, textStyle: { fontSize: '30', fontWeight: 'blod' } } }, labelLine: { normal: { show: false } }, data:this.opinionData } ] }) } }, //调用 mounted(){ this.$nextTick(function() { this.drawPie('myChart') }) } } </script> <style scoped> * { margin: 0; padding: 0; list-style: none; } </style>
5.效果图
6.监听扇形区域点击事件
相关文章
- Vue笔记:封装Echarts
- Vue的computed(计算属性)使用实例之TodoList
- vue之计算属性和侦听器
- vue 自定义指令input表单的数据验证
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- vue结合axios使用入门
- vue_axios请求封装、异常拦截统一处理
- Vue compile - Vue中的双大括号 {{ 是如何被解析(parse)的
- echarts踩坑:echarts series label formatte 不显示(关于Echarts中formatter实现动态数据的方法)
- Vue CLI 4.x安装成功,但是无法运行vue-V等指令。报错vue -V 不是内部或外部命令,也不是可运行的程序或批处理文件解决方案!!!
- vue 上传 树形
- nginx 、vue - nginx同一个端口配置多个vue工程 和 vue 配套打包具体配置 教程
- 在vue中使用echarts
- Springboot+Vue实现将图片和表单一起提交到后端,同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面
- 160:vue+openlayers 地图上添加Echarts柱状图
- 159:vue+openlayers 地图上添加Echarts环形图
- 157:vue+openlayers 地图上添加Echarts饼图
- 005:vue+openlayers加载Mapbox地图示例
- uni-app的Vue项目中Echarts的报错提示:[Vue warn]: Error in data(): “ReferenceError: echarts is not defined“
- Vue:第一个vue-cli项目
- Vue学习笔记——vue-router