element ui echarts,vue echart 组件
我们做应用系统的时候，经常会涉及到图表的展示。全面的图表展示能给客户带来视觉享受和直观的数据体验，也是提升客户认同感的措施之一。
目录
概述1。图表组件的安装和使用2。各种图表的显示和处理
概述
对于基于图表的处理，我们通常使用相应第三方的图表组件，然后为其数据模型提供符合要求的图表数据。VUE元素的前端应用也不例外。这里我们使用基于vue-echarts的模块来处理各种图表。vue-echarts是echarts图表组件的封装。
1、图表组件的安装使用
首先使用npm安装vue-echarts组件。
Git地址：https://github.com/ecomfe/vue-echarts
NPM安装司令部
npm安装电子产品vue-电子产品
然后在相应的模块页面中引入相应的组件对象，如下面的代码所示。
脚本
从“vue-e图表”//主图表对象导入图表
导入电子图表/lib/图表/折线图/曲线图
导入“电子图表/库/图表/条形图”//直方图”
导入电子图表/库/图表/饼图/饼图
导入电子海图/库/组件/工具提示//提示信息
然后将该对象添加到Vue组件中的对象。
导出默认值{
组件：{
“v形图”:电子海图
},
如果它是全局注册的，那么它可以加载到main.js中
//注册组件后就可以使用了。
Vue.component(垂直图表，VueECharts)
我们来看看图表中显示的效果图。
直方图效果
圆形分格统计图表
曲线图形
其他类型、极坐标和散点图
或者曲线和直方图的组合。
更多案例请参考官网介绍：https://echarts.apache.org/examples/zh/index.html
2、各种图表的展示处理
用于各种常规的条形图、饼图、折线图(曲线图)等。我会介绍一些案例代码。其他的一般都是根据官方案例提供的数据数据模型构造相应的数据生成的，我就不一一赘述了。
另外，我们还可以参考Vue-echarts包的处理演示：https://github.com/ecomfe/vue-e图表/树/主/src/demo。
对于直方图，效果如下
在Vue模块页面的模板中，我们可以如下定义接口代码。
垂直图表
ref=simplebar
:options=simplebar
自动调整大小
/
然后在data中为它准备数据，如下面的代码所示。
data() {
返回{
简单栏：{
标题：{text:柱形图演示 }，
工具提示：{}，
xAxis: {
数据：[衬衫，毛衣，雪纺衫，裤子，高跟鞋，袜子]
},
yAxis: {}，
系列：[{
名称：销售量，
类型：“条形”，
数据：[5，20，36，10，10，20]
}]
}
}
}
当然，我们也可以将构造相应数据的逻辑放在单独的JS文件中，然后导入。
例如，对于饼状图，其界面效果如下。
在其vue视图下，模板中的代码如下。
垂直图表
ref=pie
:options=pie
自动调整大小/
对于一般的图表数据，因为可能会有大量的处理代码，所以建议独立放在一个JS文件中，然后我们通过导入就可以使用了。
然后可以将相应的对象引入到数据中，如下所示。
脚本
从“vue-e图表”//主图表对象导入图表
导入电子图表/lib/图表/折线图/曲线图
导入“电子图表/库/图表/条形图”//直方图”
导入电子图表/库/图表/饼图/饼图
导入电子海图/库/组件/工具提示//提示信息
//导入报表数据
从导入getBar。/chartdata/bar
从导入馅饼。/chartdata/pie
从导入散点图。/图表数据/散点图
从导入折线图。/chartdata/折线图
从导入收入付款。/chartdata/incomePay
导出默认值{
组件：{
“v形图”:电子海图
},
返回{
馅饼，
散开，
折线图，
收入支付，
简单栏：{
标题：{text:柱形图演示 }，
工具提示：{}，
xAxis: {
数据：[衬衫，毛衣，雪纺衫，裤子，高跟鞋，袜子]
},
yAxis: {}，
系列：[{
名称：销售量，
类型：“条形”，
数据：[5，20，36，10，10，20]
}]
}
}
},
处理饼图数据的逻辑放在pie.js中，如以下代码所示。
导出默认值{
标题：{
文本：“突出显示的饼图程序调用示例”，
x:“中心”
},
工具提示：{
触发器：“项目”，
格式化程序：“{a} br/{b} : {c} ({d}%)”
},
图例：{
方向：“垂直”，
左：左，
数据：[直接访问，邮件营销，附属广告，视频广告，搜索引擎]
},
系列：[
{
名称：“访问源”，
类型：“饼图”，
半径：“55%”，
中心：[50% ， 60%]，
数据：[
{value: 335，name:直接访问 }，
{value: 310，name:邮件营销 }，
{value: 234，name:联盟广告 }，
{value: 135，name:视频广告 }，
{value: 1548，name:“搜索引擎”}
],
项目样式：{
重点：{
暗影模糊：10，
shadowOffsetX: 0，
阴影颜色： rgba(0，0，0，0.5)
}
}
}
]
}
界面处理的时候，值得注意的是有时候Vue页面处理正常，但是图表就是不出来。可能是因为高度或宽度为0，需要对相应的样式进行处理和设置，才能正常显示。
下面是我对图表设置的样式处理，让图表在卡片位置也能正常显示。
样式范围。echarts {宽度：100%；高度：400px}。el-row {
边距-底部：20px
}。埃尔-科尔{
边框-半径：4px
边距-底部：20px
}
/风格
最后几个接口的组合效果如下所示。
以上是基于vue-echarts来处理各种图表展示，其中很容易常规的引入组件，主要是我们需要根据对应的图表案例来参考数据组成的规则，从而根据我们的实际情况来构造对应的数据并赋给对应的模型变量。
以上是Vue元素前端应用开发的echarts图表的详细内容。更多关于Vue元素的echarts图表，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。