在vue中使用echars图表及element ui
前端项目中，通常会使用到一些图表库，为了极大可能的以图形形式化展示出数据的波动及其发展趋势，图形化展示数据，简单明了，层次鲜明，从而有利于数据分析，为后期的发展规划提供合理的建议及其优化。
echars是百度开源的一个JavaScript 实现的开源可视化库，里面有许多图形化视图模板及其说明文档，感兴趣的均可以使用其模板开发属于自己的大屏及其数据分析监控系统。
当然，除了echars,还有一些比较好用的图形化插件库，比如
1.highcharts官方实例highcharts官方Api
2.d3.js
3.Threejs
4.webJL
等等，这类图表库有很多，欢迎大家补充。
今天简单整理一下：
一，vue中使用echars图表库
当然vue也有自己内置的图表库：vue-chartjs
在vue中使用echars图表库的方式及其在工作中所使用的一些图表。
首选在vue项目文件夹下：初始化安装echarts
npm install echarts -S然后在main.js中全局引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts //Vue.prototype.$echarts = echarts在想要展示的页面中使用
首先引入：
import echarts from "echarts";页面中
引入element ui组件：下拉框el-select
elementui官网
根据选择下拉条件渲染动态折线图
<el-select @change="getValue"
multiple
collapse-tags
class="el-select"
v-model="value2"
style="height: 104px; width: 272px; font-size: 30px"
placeholder="数据分析"
>
<el-option
class="el-option"
v-for="item in option"
:key="item.label"
:label="item.value"
:value="item.label"
></el-option>
</el-select>使用table，在每一横向列表中平铺展开折线图
<table>
<!--添加动态例子，设置折线图画布 -->
<!-- 引入容器 -->
<tr class="tab-nav clear">
<td id="1" style="width: 85%; height: 100%"></td>
<td class="fplay"></td>
</tr>
<tr>
<td id="2" style="width: 770px; height: 256px"></td>
<td class="fplay"></td>
</tr>
<tr>
<td id="3" style="width: 770px; height: 256px"></td>
<td class="fplay"></td>
</tr>
<tr>
<td id="4" style="width: 770px; height: 256px"></td>
<td class="fplay"></td>
</tr>
<tr>
<td id="5" style="width: 770px; height: 256px"></td>
<td class="fplay"></td>
</tr>
<tr>
<td id="6" style="width: 770px; height: 256px"></td>
<td class="fplay"></td>
</tr>
<div class="flag">
<img src="../assets/img/f1.jpg" alt />
<img src="../assets/img/f2.jpg" alt />
<img src="../assets/img/f3.jpg" alt />
<img src="../assets/img/f6.jpg" alt />
</div>
</table>自动获取接口数据,取数据存储于各数组。
data() {
return {
charts: "",
opinionData: [],
movetime: [],
//仪表盘的数据
yangshow: [],
eyangshow: [],
eeMshow: [],
rqqshow: [],
//isActive:main,
//能量
PeeMin: [],
ptDate: [],
fGluc: [],
fgDate: [],
isShow: false,
isShow2: false,
isShow3: false,
isShow4: false,
isShow5: false,
isShow6: false,
//数据分析
option: [
{
value: "光照温湿度",
label: "1",
},
{
value: "能量",
label: "2",
},
{
value: "血氧",
label: "3",
},
{
value: "血糖",
label: "4",
},
{
value: "心率",
label: "5",
},
{
value: "体温",
label: "6",
},
],
//设置行为分析数据
motion: [
{
value: "选项a",
label: "吃饭",
},
{
value: "选项b",
label: "睡觉",
},
{
value: "选项c",
label: "骑单车",
},
],
//设置时间
options: [
{
value: "选项a",
label: "08小时",
},
{
value: "选项b",
label: "12小时",
},
{
value: "选项b",
label: "24小时",
},
],
testman: [
{
value: "选项a",
label: "Zhang",
},
{
value: "选项b",
label: "Wang",
},
{
value: "选项c",
label: "Li",
},
],
cangwei: [
{
value: "选项a",
label: "舱一",
},
{
value: "选项b",
label: "舱二",
},
],
value1: [], //行为分析
value2: [], //数据分析
people: [], //受试者
cang: [], //舱位
value5: [], //时间
count: [
{
count: 0,
},
],
};
},
mounted() {
this.getData();
},根据选择触发方法
getValue: function () {
this.$store.commit("add");
if (this.$store.state.count == 1) {
this.isShow = !this.isShow;
this.drawLine2(this.$store.state.count);
} else if (this.$store.state.count == 2) {
this.isShow2 = !this.isShow2;
this.drawLine4(this.$store.state.count);
}
},折线图的渲染方法
drawLine2(id) {
this.charts = echarts.init(document.getElementById(id));
this.charts.setOption(
{
color: ["#FF0000"],
tooltip: {
trigger: "axis",
},
legend: {
data: ["能量"],
},
grid: {
left: "0.3%",
right: "0.4%",
bottom: "3%",
containLabel: true,
},
toolbox: {
feature: {
saveAsImage: {},
},
},
xAxis: [
{
scale: true,
type: "category",
boundaryGap: true, //标签和数组显示在刻度下面，x轴点
data: this.ptDate,
axisTick: {
alignWithLabel: true,
show: true, //展示刻度线
},
axisLine: {
lineStyle: {
opacity: 0, //透明度为0
show: true, //隐藏刻度线 //color:'red',//设置x轴的颜色
},
symbol: ["none", "arrow"],
},
axisLabel: {
formatter(value) {
return value + ":00"; // 格式时间显示方式
},
},
splitLine: {
show: true, //缩放展示小网格 //网格线
lineStyle: {
color: "#979797",
},
},
},
{
type: "category",
position: "bottom",
offset: 25,
axisPointer: {
type: "none",
},
},
],
//-------设置y轴-------------
yAxis: {
type: "value",
axisLine: {
lineStyle: {
//坐标轴线
color: "white", //y轴颜色
type: "solid", //实线
},
symbol: ["none", "arrow"],
},
max: 0.8,
nameTextStyle: {
color: "blue", //设置文字样式
align: "left", //文字水平对齐方式
verticalAlign: "middle", //文字垂直对齐方式
},
// splitLine: {
// show: false//去掉分割线 //去调坐标的刻度分割线
// },
},
series: [
{
// type: 'effectScatter',
// symbolSize: 20,
// data: [
// [72.7, 15.2],
// [13.4, 42]
// [72.7, 15.2],
// [13.4, 42]
// ]
name: "能量",
type: "line",
stack: "总量",
symbol: "none", //设置拐点样式circle,none,star(拐点为方块)
symbolSize: 8, //设置拐点的大小
smooth: 0.2, //折线弧度，变得不生硬
data: this.PeeMin,
barWidth: "80%",
itemStyle: {
//设置线条颜色样式
normal: {
color: "white",
lineStyle: {
width: 3, //设置线条粗细
},
label: {
//设置折点上的文字以及背景颜色
show: true,
color: "white",
backgroundColor: "black",
},
},
},
},
],
//-------设置滑动查看进度-----------
//设置滚动条拉取折线条。
dataZoom: {
//type:'slide',//滑动方式
type: "inside", //拉动方式
show: true,
realtime: true,
y: 36,
height: 20,
start: 50,
end: 100,
orient: "horizontal", //设置滑块的布局方向
top: "bottom",
zoomOnMouseWhel: true, //设置鼠标滚轮缩放
},
},
//防止越界,重新绘制
(window.onresize = this.charts.resize)
);
},最终可以实现选择下拉框的数值，实现根据选择条件分别展示。
比如：能量消耗，心率，体温，血糖，光照温湿度，血氧等等。
二，vue中使用element ui
1，
npm安装elementui
npm i element-ui -S2,在main.js中全局注册配置
import ElementUi from 'element-ui'
Vue.use(ElementUi)3，页面中引用
<el-select
@change="getValue"
multiple
collapse-tags
class="el-select"
v-model="value2"
style="height: 104px; width: 272px; font-size: 30px"
placeholder="数据分析"
>
<el-option
class="el-option"
v-for="item in option"
:key="item.label"
:label="item.value"
:value="item.label"
></el-option>
</el-select>可以根据自己需要的组件选择引入即可。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
