vue中封装echarts公共组件过程
作者:朵朵和太阳
这篇文章主要介绍了vue中封装echarts公共组件过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
定义图表公共样式是为了统一同一网站各页面图表的基础样式baseOption.js(轴线、区域、色系、字体),统一封装后页面需要直接引入,传入所需参即可覆盖基础样式。
以下示例封装图表组件Echart.vue。
1、安装echarts
npm install echarts --save npm install lodash --save // 若已安装请忽略
2、在mian.js中全局引入
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
3、下面开始封装图表
baseOption.js文件:公共样式定义,为了统一同网站各种图表的基础样式,比如轴线、图各板块颜色,值仅供参考):
// baseOption.js export default { color: [ "#0067E1", "#0CC1FF", "#00D1B3", "#85E814", "#FFA082", ], tooltip: {}, legend: { orient:'horizontal', type:'scroll', pageIconSize:12, pageIconColor:'#aaa', pageIconInactiveColor :'#2f4554', pageTextStyle:{ color:'#999999' }, itemWidth:20, itemHeight:12, top:0, textStyle:{ color:'#999999' }, }, grid: { top: "13%", left: "3%", right: "10%", bottom: "2%", containLabel: true, }, xAxis: [ { axisLine: { lineStyle: { color: "rgba(65, 97, 128, 0.15)", // type: "dashed", }, }, axisTick: { show: false, }, axisLabel: { interval:0, color: "#rgba(0, 0, 0, 0.25)", textStyle: { fontSize: 10, } }, nameTextStyle:{ color:'#999999', fontSize: 10, }, }, ], yAxis: [ { axisLabel: { color: "#rgba(0, 0, 0, 0.25)", textStyle: { fontSize: 11, }, }, axisLine: { lineStyle: { color: "rgba(65, 97, 128, 0.15)", }, }, splitLine: { lineStyle: { color: "rgba(65, 97, 128, 0.15)", }, }, axisTick: { show: false, }, nameTextStyle:{ color:'#999999', fontSize: 10, padding:[0,20,0,0] }, minInterval: 1 }, ], };
Echart.vue文件:图本身组件
// Echart.vue <template> <div :id="elId" style="height:100%,width:100%" /> </template>
<script> import echarts from "echarts"; import { merge, debounce } from "lodash"; // 引入公共样式 import baseOption from "./baseOption" export default { data() { return { elId: "", vOption: { series: [], }, }; }, props: { optionData: Object, }, computed: { // 合并配置对象 option() { return merge({}, baseOption, this.vOption, this.optionData); }, }, created() { this.elId = this.uuid(); }, mounted() { // 实例化echarts对象 this.$nextTick(() => { this.initChart(); }); }, beforeDestroy() { if (!this.chart) { return; } this.chart.dispose(); this.chart = null; }, watch: { optionData: { deep: true, handler: function() { this.$nextTick(() => { this.initChart(); }); }, }, }, methods: { // 生成唯一uuid做为唯一标识符 uuid() { return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) { var r = (Math.random() * 16) | 0, v = c == "x" ? r : (r & 0x3) | 0x8; return v.toString(16); }); }, // 绘图 initChart() { if(!document.getElementById(this.elId)) return this.chart = echarts.init(document.getElementById(this.elId)); this.chart.setOption(this.option); const that = this; window.addEventListener( "resize", debounce(() => { // 引入debounce,防止频繁更改浏览页尺寸出现页面抖动 if (that.chart) { that.chart.resize(); } }, 100) ); }, }, }; </script>
4、接下来只需要在需要显示图表的地方引入Echart.vue
传入目标数据就可以了,以下示例数据为饼图:
// index.vue <template> <div class="chartBox"> <Chart :optionData="chartData"></Chart> </div> </template>
<script> // 引入Echart.vue组件 import Chart from "./Echart.vue"; export default { components: { Chart, }, data() { return { // 图目标数据 chartData: { tooltip: { show:true, trigger:'item', formatter: "{b} : {c} ({d}%)", }, xAxis: [{ show: false }], yAxis: [{ show: false }], series: [ { name: "访问来源", type: "pie", // 饼图 radius: ["30%", "45%"], // 饼图大小 data: [ { value: 1048, name: "搜索引擎" }, { value: 735, name: "直接访问" }, { value: 580, name: "邮件营销" }, { value: 484, name: "联盟广告" }, { value: 300, name: "视频广告" }, ], }, ], }, }; }, }; </script>
此时好看的饼图就出现啦~~
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。