vue使用echarts,封装复用组件
echarts是我们项目中常用的插件,在这要封装一个echarts组件,在项目中能够复用
我们先安装依赖
npm install echarts
安装成功以后在main.js中引入
import echart from 'echarts' Vue.prototype.$echarts = echart
在components文件夹下创建c-bar文件夹,c-bar文件夹创建c-bar.vue以及index.js文件
c-bar.vue文件写入
<template> <div class="bar"> <div :id="id" class="bar_canvas"></div> </div> </template> <script> export default { name: "c-bar", props: ["propData", "id"], data() { return { myChart: null }; }, mounted() { if (this.id) { let myChart = this.$echarts.init(document.getElementById(this.id)); this.myChart = myChart; this.myChart.setOption(this.propData); } } }; </script> <style scoped lang="scss"> .bar { width: 100%; height: 100%; position:absolute; } .bar_canvas { width: 100%; height: 100%; } </style>
index.js文件写入
import cBar from './c-bar.vue'; cBar.install = function (Vue) { Vue.component(cBar.name, cBar); }; export default cBar;
然后在main.js中引入组件
import cBar from '@/components/c-bar'; cBar.install(Vue)
这样我们就可以全局使用组件了
我们在使用时
<template> <div> <div class="bar"> <c-bar :propData="dataArr" id="canvans" class="bar_canvas"></c-bar> </div> <div class="bar1"> <c-bar :propData="option" id="can_view" class="bar_canvas1"></c-bar> </div> </div> </template> <script> export default { data() { return { myChart: null, option: { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }] }, dataArr: { tooltip: { trigger: "item", formatter: "{b}: {c} ({d}%)" }, series: [ { name: "", type: "pie", radius: ["20%", "30%"], label: { formatter: " {per|{d}%} {b|{b}} ", rich: { b: { color:"#fff", fontSize: 16, lineHeight: 33 }, per: { padding: [2, 4], borderRadius: 2 } } }, data: [ { value: 20, name: "win8", itemStyle: { normal: { color: "#02B672" } } //设置圆环的颜色 }, { value: 20, name: "win10", itemStyle: { normal: { color: "#0FC2E7" } } }, { value: 20, name: "winXP", itemStyle: { normal: { color: "#0C6CE8" } } }, { value: 20, name: "macOS", itemStyle: { normal: { color: "#DF4546" } } }, { value: 20, name: "win7", itemStyle: { normal: { color: "#F7BB2D" } } } ] } ] } }; } }; </script> <style lang="scss"> .bar { width: 500px; height: 500px; position: absolute; top: 0; right: 0; } .bar1 { width: 500px; height: 500px; position: absolute; top: 0; left: 0; } .bar_canvas { width: 100%; height: 100%; } </style>
这样我们就可以复用了