echarts几个公司内部数据可视化图表必收藏 echarts几个公司内部数据可视化

折线图

日负荷折线图
最大需求表

柱状图

日电量柱状图
分时电量
功率因数
三相温度

水球图

年月日负荷率图

散点图

三相平衡

最近公司有一个需求，要做一个数据可视化的页面，所有的图表都在下面，做这些都是本人自己写的，全部都是真是的项目中的代码，包含有柱状图、折线图、水球图以及散点图，这里直接打出来给大家练手，希望大家多多支持，如果这篇文章对您有用的话，记得收藏
数据：
链接: https://pan.baidu.com/s/1BSjLZkZ7dbsdiwPt4uPqOg
提取码: u1k9
??????温馨提示：
1.大家尽量不要使用手机看哦！不然把手累抽筋了不要怪我哦= =
2.大家不需要关注charts等这些自定义组件，主需要关注图表的样式即可
3.此文章需要一定的vue基础才可以哦
【echarts几个公司内部数据可视化图表必收藏】
折线图
日负荷折线图
在这个图表中，大家可以学会如何使封闭的区域填充渐变色

.vue文件代码如下：

.dailyLoad {background-color: rgb(20, 37, 55); height: 3.3684rem; #dailyLoad {width: 100%; height: 3.3684rem; }.detail {position: absolute; width: 100%; height: 0.5263rem; bottom: 0.0105rem; left: 0; font-size: 0.0947rem; color: white; background-color: rgb(20, 37, 55); margin-top: 0.0526rem; .today,.yesterday {font-size: 0.1rem; height: 0.2632rem; display: flex; padding: 0 5%; align-items: center; white-space: nowrap; text-align: center; justify-content: space-between; .mount {display: flex; align-items: center; justify-content: center; img {width: 0.2105rem; height: 0.2105rem; margin-right: 0.0333rem; }}.time {display: flex; align-items: center; justify-content: center; img {width: 0.2105rem; height: 0.2105rem; margin-right: 0.0333rem; }}}.today {background-color: #072951; box-shadow: -0.0526rem 0px 0.0789rem #2c58a6 inset,/*左边阴影*/ 0.0526rem 0px 0.0789rem #2c58a6 inset; }}}

最大需求表
在这个图表中，大家可以学会如何自定义柱状图的形状

文章图片

.vue文件代码如下：

#maximumDemand {width: 100%; height: 100%; }.detail {position: absolute; // height: 100px; height: 0.5263rem; bottom: 0.1133rem; left: 0; width: 100%; font-size: 0.1rem; color: white; background-color: rgb(20, 37, 55); .item {display: flex; align-items: center; justify-content: space-around; background-color: #072951; height: 0.3rem; &:nth-child(1) {box-shadow: -0.0526rem 0px 0.0789rem #2c58a6 inset,/*左边阴影*/ 0.0526rem 0px 0.0789rem #2c58a6 inset; }img {display: block; width: 0.3333rem; height: 0.3333rem; }}}

柱状图
日电量柱状图
在这个图表中，大家可以学会如何自定义柱状图的渐变颜色

文章图片

.vue文件代码如下：

.dailyElectricity {height: 3.3684rem; #dailyElectricity {width: 100%; height: 3.3684rem; }.detail {position: absolute; height: 0.5263rem; bottom: 2px; left: 0; width: 100%; font-size: 0.1rem; color: white; background-color: rgb(20, 37, 55); .img {display: flex; // align-items: center; justify-content: space-around; background-color: #072951; box-shadow: -0.0526rem 0px 0.0789rem #2c58a6 inset,/*左边阴影*/ 0.0526rem 0px 0.0789rem #2c58a6 inset; img {display: block; width: 0.2105rem; height: 0.2105rem; }}.data {display: flex; // align-items: center; justify-content: space-around; margin-top: 0.1rem; }}}

分时电量
在这个图表中，大家可以学会如何动态的轮流展示数据

.vue文件代码如下：

.timeSharingE {margin-top: 0.1842rem; background-color: rgb(20, 37, 55); #timeSharingE {width: 100%; height: 3.1579rem; }.detail {position: absolute; height: 0.5263rem; bottom: 0; left: 0; width: 100%; font-size: 0.1rem; color: white; background-color: rgb(20, 37, 55); .img {display: flex; // align-items: center; justify-content: space-around; background-color: #072951; box-shadow: -0.0526rem 0px 0.0789rem #2c58a6 inset,/*左边阴影*/ 0.0526rem 0px 0.0789rem #2c58a6 inset; img {display: block; width: 0.2105rem; height: 0.2105rem; }}.data {display: flex; // align-items: center; justify-content: space-around; margin-top: 0.1rem; }}}

功率因数
在这个图表中，大家可以学会如何将柱状图进行非常个性化的定制

文章图片

.vue文件代码如下：

#powerFactor {width: 100%; height: 100%; }

三相温度
在这个图表中，大家可以学会visualMap属性的使用，以及图表内容文字的格式化

.vue文件代码如下：

#tPhaseTemperature {width: 100%; height: 100%; }

水球图
年月日负荷率图
在这个图表中，大家可以学会如何绘制水球图

文章图片

.vue文件代码如下：

.loadRate {margin-top: 0.1842rem; background-color: rgb(20, 37, 55); .ymdLoadRate {width: 100%; height: 3.1579rem; display: flex; #dayLoadRate {flex: 1; }#mouthLoadRate {flex: 1; }#yearLoadRate {flex: 1; }}.desc {width: 100%; position: absolute; top: 65%; left: 0; display: flex; align-items: center; justify-content: space-around; color: white; }.detail {position: absolute; height: 0.5263rem; bottom: 0.1133rem; left: 0; width: 100%; font-size: 0.1rem; color: white; background-color: rgb(20, 37, 55); .img {display: flex; justify-content: space-around; background-color: #072951; box-shadow: -0.0526rem 0px 0.0789rem #2c58a6 inset,/*左边阴影*/ 0.0526rem 0px 0.0789rem #2c58a6 inset; img {display: block; width: 0.3333rem; height: 0.3333rem; }}.data {display: flex; justify-content: space-around; margin-top: 0.1rem; }}}

散点图
三相平衡
在这个图表中，大家可以学会visualMap属性的使用，以及图表内容文字的格式化