vue中引入echarts组件,react封装echarts
在实际的项目开发中，我们会经常和图表打交道，比如订单数量表、商品销售表、会员数量表等。它可以以折线图、条形图、饼图等形式显示。下面这篇文章主要介绍vue项目中封装echarts的优雅方式的相关信息，有需要的可以参考一下。
目录
场景需求代码概述实现组件-chart-index.vue组件-chart-index.js组件-Chart-options main . jschartestindex . vue index . js代码摘要补充2:图表高亮轮询，如何使用dispatchAction附：echarts饼状图调用高亮示例dispatchAction补充3:封装echarts地图，姐妹摘要
场景
1.使用Echarts时，需要写一堆option。如果必须为每个图表编写一个，那么文件中的代码量非常大。2.不方便重复使用。
需求
1.方便重复使用。2.展示图表，数据与业务和风格分离，只能传输数据。3.项目中会有很多需要的图表，可以用较少的代码自动导入。4.我的图表经常用于大屏数据可视化，采用的是比例缩放方式，所以图表可以根据界面缩放自动缩放，不需要手动调用。5.
代码总览
涉及的文件如下(详见import):
- src
-组件
-图表
-index . vue//图表单文件组件，用于接口调用
-index . js//自动导入选项中的图表选项
-选项//用于存储各种图表的选项
-bar//任何示例
- index.js
-视图
-chart test//实例所在的位置
- index.vue
- index.scss
- index.js
-main . js//e charts图表的全球介绍
实现
components--chart--index.vue
这里定义了一个名为ChartView的组件，并打开了四个可配置的属性：宽度、高度、是否自动调整大小(默认为)和图表配置chartOption。
这里默认使用Canvas渲染图表，也可以使用SVG。自己选吧。
具体代码如下
模板
div class=图表
div ref= chart :style= { height:height，width: width } /
/div
/模板
脚本
//介绍了echarts的核心模块，为echarts提供了必要的接口。
从“echarts/core”导入*作为echarts
//引入直方图，带图表后缀。
导入{
条形图
}来自“电子图表”
//提示框、标题、直角坐标系组件、组件后缀都是组件。
导入{
标题组件，
工具提示组件，
网格组件
}来自“电子图表/组件”
//引入画布渲染器。注意，引入CanvasRenderer或SVGRenderer是一个必要的步骤。
导入{
CanvasRenderer
}来自“电子图表/渲染器”
//注册所需的组件
echarts.use(
[TitleComponent，TooltipComponent，GridComponent，条形图，CanvasRenderer]
)
导出默认值{
名称：图表视图，
道具：{
宽度：{
类型：字符串，
默认值：“100%”
},
高度：{
类型：字符串，
默认值：“350像素”
},
自动调整大小：{
类型：布尔型，
默认值：真
},
chartOption: {
类型：对象，
必填：真
},
类型：{
类型：字符串，
默认：“画布”
}
},
data() {
返回{
图表：空
}
},
观察：{
chartOption: {
深：真的，
处理程序(新值){
this.setOptions(newVal)
}
}
},
已安装(){
this.initChart()
if (this.autoResize) {
window . addevent listener( resize ，this.resizeHandler)
}
},
销毁前(){
如果(！this.chart) {
返回
}
if (this.autoResize) {
window . remove event listener( resize ，this.resizeHandler)
}
this.chart.dispose()
this.chart=null
},
方法：{
resizeHandler() {
this.chart.resize()
},
initChart() {
this.chart=echarts.init(this。$refs.chart，，{
渲染器：this.type
})
this.chart.setOption
this.chart.on(click ，this.handleClick)
},
handleClick(params) {
这个。$emit(click ，params)
},
setOptions(选项){
this.clearChart()
this.resizeHandler()
如果(this.chart) {
this.chart.setOption(选项)
}
},
刷新(){
this . set选项(this.chartOption)
},
clearChart() {
this.chart this.chart.clear()
}
}
}
/脚本
components--chart--index.js
这里主要使用require.context来遍历和导入options中定义的图表，这样就不需要在代码中一个一个的导入了，尤其是当图表很多的时候。
const modules files=require . context(。/options ，true，/index.js$/)
设模块={}
modulesFiles.keys()。forEach(item={
modules=Object.assign({}，modules，modulesFiles(item)。默认)
})
导出默认模块
components--chart--options
以下是如何包装你想要的图表。
从Echarts的官方示例中随机选择一个示例。
在options下创建一个新的bar目录，在bar目录下创建一个新的index.js文件。只是个人习惯。我喜欢把每个图表存放在一个单独的文件夹里。如果不喜欢这种方式，可以只用js文件代替目录，但是components-chart-index . js index . js要做相应的修改)
复制直接示例的选项代码。
index.js的具体代码如下
常量测试条=(数据)={
常量默认值配置={
xAxis: {
类型：“类别”，
数据：[周一，周二，周三，周四， Fri ，周六，周日]
},
亚西斯：{
类型：“值”
},
系列：[{
数据：[120，200，150，80，70，110，130]，
类型：“条形”
}]
}
const opt=Object.assign({}，defaultConfig)
返回选项
}
导出默认值{
试样棒
}
TestBar方法可以作为参数传递。使用时，图表需要配置的属性，如数据资料、图表颜色等。可以作为参数传递。
main.js
这里全局引入封装的Echarts组件，方便接口调用。(至于单引用的方式，就不用多说了)
具体代码如下：
从“@/components/chart/index.js”导入eChartFn
从 @/components/chart/index.vue 导入ChartPanel
Vue.component(ChartPanel.name，ChartPanel)
vue . prototype . $ eChartFn=eChartFn
chartTest
下面是调用封装条形图的方法。主要代码如下
index.vue
chart-view class= chart-content :chart-option= chart opt :auto-resize= true height= 100% /
index.js
导出默认值{
名称：图表测试视图，
data() {
返回{
chartOpt: {}
}
},
已安装(){}，
已创建(){
this.chartOpt=this。$eChartFn.testBar()
},
方法：{
},
观察：{}
}
效果如下
你可以试着拖动浏览器的大小。如您所见，随着浏览器的拖动，图表也会自动缩放。
代码
只要根据代码概述的目录查找代码即可。
总结
Echarts使用的各种图表，基本都能在Echarts官方举例和Echarts视觉作品分享上找到(已停售)。
上面，图表组件被封装。按照上面的方法，把图表的选项配置和相关处理放在options文件夹下，调用图表时调用相应的选项，就更方便了，只需要几行代码。
图表组件易于重用，可以直接使用。
补充
评论说想动态修改option中的属性，做了个小例子，动态修改饼状图的数据和颜色属性。这是一个可以直接用于生产的例子。直接参考代码就好了，不赘述。如果要修改任何属性，直接传过来就行了。可以传递特定的参数，如果想要修改更多的属性，可以将参数封装到json中。只要知道如何在封装选项中灵活运用就好了。
以下是新的参考代码。
- src
-组件
-图表
-选项//用于存储各种图表的选项
-饼图//饼图示例
- index.js
-视图
- chartTest //实例所在
- index.vue
- index.scss
- index.js
代码使用都是直接一行调用的
this.chartOpt2=this .$eChartFn.getPieChart([100，23，43，65]，[#36CBCB ， #FAD337 ， #F2637B ， #975FE4])
效果如下：
补充2：图表高亮轮询，dispatchAction使用
效果图
使用方法
加上：play-highlight=true 属性就行
lt；chart-view class= chart-content :chart-option= chart opt 2 :auto-resize= true :play-highlight= true height= 100% /gt .
复制代码
主要实现的代码在如下文件的playHighlightAction方法里面，参考的代码(见文末)实现的。只是简单的高亮轮询，具体各种实现就自己看文档调样式了。
- src
-组件
-图表
- index.js //实现自动化导入选择里的图表选择权
附：echarts 饼图调用高亮示例 dispatchAction
！-为展示准备一个具备大小（宽高)的多姆
div id= main style= width:600 px；高度：400像素；/div
脚本类型=文本/javascript
var myChart=echarts。init(文档。getelementbyid( main )；
var app={ }；
选项={
标题：{
文本：饼图程序调用高亮示例，
左："中间"
},
工具提示：{
触发器："项目",
格式化程序：" {a}
{b}:{c}{d}%
},
图例：{
方向：垂直,//图例列表的布局朝向水平 垂直
左：左，
数据：[直接访问,邮件营销,联盟广告,视频广告,搜素引擎]
},
系列：[
{
名称：访问来源，
类型："饼图",
半径："55%",
中心：[50% , 60%],
数据：[
{值：335,名称：直接访问},
{值：310,名称：邮件营销},
{值：234,名称：联盟广告},
{值：135,名称：视频广告},
{值：1548,名称：搜索引擎},
],
重点：{
项目样式：{
暗影模糊：10,
shadowOffsetX:0，
阴影颜色： rgba(0，0，0，0.5)
}
}
}
]
};
app。当前索引=-1；
setInterval(()={
var数据len=选项。系列[0]。数据。长度；
//取消之前高亮的图形
myChart.dispatchAction({
类型：淡化，
seriesIndex:0，
数据索引：app.currentIndex
});
app。当前索引=(应用程序。当前索引1)%数据长度；
//高亮当前图形
myChart.dispatchAction({
类型：突出显示，
seriesIndex:0，
数据索引：app.currentIndex
});
//显示工具提示
myChart.dispatchAction({
键入：显示提示，
seriesIndex:0，
数据索引：app.currentIndex
})
}, 1000);
option myChart.setOption(选项);
/脚本
补充3：封装echarts地图，姐妹篇
vue2项目中封装展示地图比较优雅的方式
总结
到此这篇关于某视频剪辑软件项目中封装展示的优雅方式的文章就介绍到这了，更多相关某视频剪辑软件封装展示内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。