vue echart 组件,vue公共组件的封装
这篇文章主要介绍了某视频剪辑软件中封装展示公共组件过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
1、安装电子海图2、在mian.js中全局引入3、下面开始封装图表4、接下来只需要在需要显示图表的地方引入Echart.vue定义图表公共样式是为了统一同一网站各页面图表的基础样式baseOption.js(轴线、区域、色系、字体),统一封装后页面需要直接引入，传入所需参即可覆盖基础样式。
以下示例封装图表组件Echart.vue。
1、安装echarts
新公共管理安装电子图表-保存
新公共管理安装lodash - save //若已安装请忽略
2、在mian.js中全局引入
从"元素-用户界面"导入ElementUI
导入“元素-ui/lib/主题-粉笔/索引。CSS”；
vue。使用(元素ui)；
3、下面开始封装图表
baseOption.js文件：公共样式定义，为了统一同网站各种图表的基础样式，比如轴线、图各板块颜色，值仅供参考):
//baseOption.js
导出默认值{
颜色：[
#0067E1 ，
#0CC1FF ，
#00D1B3 ，
#85E814 ，
#FFA082 ，
],
工具提示：{},
图例：{
方向："水平",
类型："滚动",
pageIconSize:12，
pageIconColor:#aaa ，
pageiconactivecolor:"# 2f 4554 "，
pageTextStyle:{
颜色： #999999
},
项目宽度：20,
项目高度：12,
top:0，
textStyle:{
颜色： #999999
},
},
网格：{
顶部："13%",
左："3%",
对："10%",
底部："2%",
containLabel: true，
},
xAxis: [
{
轴线：{
线型：{
颜色： rgba(65，97，128，0.15)，
//类型："虚线",
},
},
轴棒：{
秀：假的，
},
axisLabel: {
间隔：0,
颜色： #rgba(0，0，0，0.25)，
textStyle: {
fontSize: 10，
}
},
nameTextStyle:{
颜色： #999999 ,
fontSize: 10，
},
},
],
亚西斯：[
{
axisLabel: {
颜色： #rgba(0，0，0，0.25)，
textStyle: {
fontSize: 11，
},
},
轴线：{
线型：{
颜色： rgba(65，97，128，0.15)，
},
},
分割线：{
线型：{
颜色： rgba(65，97，128，0.15)，
},
},
轴棒：{
秀：假的，
},
nameTextStyle:{
颜色： #999999 ,
fontSize: 10，
填充：[0,20,0,0]
},
最小间隔：1
},
],
};
Echart.vue文件：图本身组件
//Echart.vue
模板
div :id=elId style=高度：100%,宽度：100% /
/模板
脚本
从“电子海图”导入电子海图；
从"洛达什"导入{合并，de bounce }；
//引入公共样式
从导入基本选项./baseOption
导出默认值{
data() {
返回{
elId: ，
vOption: {
系列：[],
},
};
},
道具：{
选项数据：对象，
},
计算值：{
//合并配置对象
选项(){
返回merge({}，baseOption，this.vOption，this。选项数据)；
},
},
已创建(){
这个。elid=这个。uuid()；
},
已安装(){
//实例化展示对象
这个. nextTick(()={
这个。初始化图表()；
});
},
销毁前(){
如果(!this.chart) {
返回；
}
这个。图表。dispose()；
this.chart=null
},
观察：{
optionData: {
深：真的，
处理程序：函数(){
这个. nextTick(()={
这个。初始化图表()；
});
},
},
},
方法：{
//生成唯一全局唯一识别做为唯一标识符
uuid() {
返回
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。