vue echart 组件,vue使用echarts饼图
由于在项目中需要对数据进行可视化处理，也就是用图表展示，所以下面这篇文章主要给大家介绍了关于武埃查尔兹如何实现图表组件封装的相关资料，需要的朋友可以参考下
目录
背景：有哪些工具？怎么封装？总结
背景：
需要大量使用图表的项目，为了提升开发效率，可以对图表类进行封装成组件，方便页面的搭建，也能进行统一管理维护，即使后面系统风格需要调整，调整起来也比较方便、快速。
有哪些工具？
常用的有Echarts、AntV、使用起来都大同小异，具体图表如何实现，看官网参数进行配置调整即可。
怎么封装？
以展示为例，效果截图
安装依赖，安装武埃查尔兹需要安装埃查尔兹山下使用武埃查尔兹还需要安装@vue/composition-api。新公共管理安装电子图表-保存
新公共管理安装vue-echarts -保存
新公共管理安装-保存@vue/composition-api
//最终安装版本
//埃查尔兹:^5.3.2,
//vue-echarts: ^6.0.3，
// @ vue/composition-API :^1.6.1，
使用武埃查尔兹对图表进行封装，这里只演示线条折线图，常用的柱状图酒吧，饼图馅饼等与折线图线条的实现方法相似，更改默认选项和选择权对应参数即可100 .武埃查尔兹只需要传入选择权配置即可进行图表更新，配合某视频剪辑软件的计算，我们可以根据小道具进来的数据进行实时计算，从而实现展示的绘制和数据更新数据源为传进来展示的数据，包括横纵坐标的数值和配置参数；图表期权是一些用户自定义的线条参数，可以根据当前图表的风格对组件做一些参数调整；高度控制统计图的高度100 .选项的标题、工具提示、网格、图例、xAxis、yAxis、系列几个重要参数，使用分配进行整合，如果图表期权有传自定义的配置参数，则生效自定义配置参数，没有，则使用默认配置。设置自动调整大小让图表自适应模板。
垂直图表
ref=我的图表
"电子海图"
:style={height: height}
:option=option
自动调整大小
@click=click
/
/模板
脚本
//eslint-disable-next-line no-unused-vars
从"电子海图"导入电子海图
从" vue-echarts "导入VChart
导出默认值{
名称： EchartLine ，
组件：{
VChart
},
道具：{
数据源：{
类型：对象，
默认值：()={
返回{}
}
},
chartOption: {
类型：对象，
默认值：()={
返回{}
}
},
高度：{
类型：字符串，
默认值："340像素"
},
单位：{
类型：字符串，
默认值：""
}
},
计算值：{
选项(){
常量选项={
标题：_。赋值({}，this.defaultOption.title，this.chartOption.title {})，
工具提示：_。赋值({}，this.defaultOption.tooltip，this.chartOption.tooltip {})，
网格：_。赋值({}，this.defaultOption.grid，this.chartOption.grid {})，
图例：_。赋值({}，this.defaultOption.legend，this.chartOption.legend {})，
xAxis: _ .赋值({}，this.defaultOption.xAxis，this.chartOption.xAxis，{data: this.dataSource.xAxis})，
亚希亚斯：_ .赋值({}，this.defaultOption.yAxis，this.chartOption.yAxis {})，
系列：_。map(this.dataSource.yAxis，dataItem={
返回{
类型："行",
符号：数据项。符号 圆圈，
smooth: dataItem.smooth！==假，
符号大小：数据项。符号大小 8，
显示符号：dataitem。显示符号 (数据项。数据。长度===1)，
名称：数据项目.名称
数据：dataItem.data，
项目样式：{
color: dataItem.color，
borderColor: rgba(255，255，255，0.8)，
边框宽度：2
}
}
})
}
返回选项
}
},
data () {
返回{
默认选项：{
标题：{
x: 5%
},
工具提示：{
触发器："轴",
textStyle: {
颜色： #fff
},
背景色： rgba(51，51，51，0.80)，
填充：[14,20]
},
网格：{
顶部："15%",
左："24",
右："24",
底部："60",
containLabel: true
},
图例：{
左："中间",
底部："26",
itemGap: 25，
项目宽度：8,
项目高度：8,
秀：真的，
图标："圆形",
textStyle: {
color: ()={
return _ .map(this.dataSource.yAxis，item={
返回项目。颜色
})
}
}
},
xAxis: {
axisLabel: {
边距：12,
textStyle: {
颜色： #666
}
},
轴棒：{
显示：假
},
轴线：{
线型：{
颜色： #E8E8E8
}
},
分割线：{
显示：假
}
},
亚西斯：{
minInterval: 1，
分裂数：5,
轴线：{
秀：真的，
线型：{
颜色： #E8E8E8
}
},
分割线：{
秀：真的，
线型：{
颜色： #E8E8E8 ，
不透明度：0.5,
类型："点状"
}
},
轴棒：{
显示：假
},
axisLabel: {
textStyle: {
颜色： #666
}
}
}
}
}
},
方法：{
单击(e) {
这个发出(点击，e)
}
}
}
/脚本
样式lang=scss 范围。电子海图{
宽度：100%;
身高：100%;
}
/风格
组件使用，配置数据源即可展示数值，如果想自行定义一些参数配置，可通过图表期权配置实现模板。
电子海图线：数据源=数据源/电子海图线
/模板
脚本
从" @/components/EchartLine "导入电子海图
导出默认值{
名称： EchartsDemo ，
组件：{
电子海图
},
data () {
返回{
数据源：{
xAxis: [星期一, 星期二, 星期三, 星期四, 星期五],
亚西斯：[
{
名称： 语文，
颜色： #FF6F00 ，
数据：[45,56,24,87,45]
},
{
名称： 数学，
颜色： #FFB903 ，
数据：[34,86,67,34,89]
},
{
名称： 英语，
颜色： #3D8BFF ，
数据：[66,83,45,77,73]
}
]
}
}
},
方法：{
}
}
/脚本
Tips:
武埃查尔兹资料：github.com/ecomfe/vue-…
echarts v5各参数配置：echarts。阿帕奇。组织/zh/选项。h…
总结
到此这篇关于武埃查尔兹如何实现图表组件封装的文章就介绍到这了，更多相关武埃查尔兹图表组件封装内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。