数据可视化

呜哩哇啦2

于 2023-04-21 22:03:26 发布

阅读量156

点赞数

文章标签：信息可视化 echarts 前端

本文链接：https://blog.csdn.net/weixin_47106024/article/details/130294618

版权

1.折线图


(function() {
  var yearData = [
    {
      year: "2020", // 年份
      data: [
        // 两个数组是因为有两条线
        [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
      ]
    },
    {
      year: "2021", // 年份
      data: [
        // 两个数组是因为有两条线
        [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
        [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
      ]
    }
  ];
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".line .chart"));
  // 2.指定配置
  var option = {
    // 通过这个color修改两条线的颜色
    color: ["#00f2f1", "#ed3f35"],
    tooltip: {
      trigger: "axis"
    },
    legend: {
      // 如果series 对象有name 值，则 legend可以不用写data
      // 修改图例组件 文字颜色
      textStyle: {
        color: "#4c9bfd"
      },
      // 这个10% 必须加引号
      right: "10%"
    },
    grid: {
      top: "20%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      show: true, // 显示边框
      borderColor: "#012f4a", // 边框颜色
      containLabel: true // 包含刻度文字在内
    },

    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月"
      ],
      axisTick: {
        show: false // 去除刻度线
      },
      axisLabel: {
        color: "#4c9bfd" // 文本颜色
      },
      axisLine: {
        show: false // 去除轴线
      }
    },
    yAxis: {
      type: "value",
      axisTick: {
        show: false // 去除刻度线
      },
      axisLabel: {
        color: "#4c9bfd" // 文本颜色
      },
      axisLine: {
        show: false // 去除轴线
      },
      splitLine: {
        lineStyle: {
          color: "#012f4a" // 分割线颜色
        }
      }
    },
    series: [
      {
        name: "新增粉丝",
        type: "line",
        // true 可以让我们的折线显示带有弧度
        smooth: true,
        data: yearData[0].data[0]
      },
      {
        name: "新增游客",
        type: "line",
        smooth: true,
        data: yearData[0].data[1]
      }
    ]
  };

  // 3. 把配置给实例对象
  myChart.setOption(option);
  // 4. 让图表跟随屏幕自动的去适应
  window.addEventListener("resize", function() {
    myChart.resize();
  });

  // 5.点击切换效果
  $(".line h2").on("click", "a", function() {
    // alert(1);
    // console.log($(this).index());
    // 点击 a 之后 根据当前a的索引号 找到对应的 yearData的相关对象
    // console.log(yearData[$(this).index()]);
    var obj = yearData[$(this).index()];
    option.series[0].data = obj.data[0];
    option.series[1].data = obj.data[1];
    // 需要重新渲染
    myChart.setOption(option);
  });
})();

2. 1进度条

const datalist = [780, 600, 770, 770, 770];
const namelist = ['水(m³)', '电(Kwh)', '蒸汽(t)', '天然气(m³)', '压缩空气(m³)'];
option = {
          grid: {
            top: '0',
            left: '1%',
            right: '10%',
            bottom: '0'
          },
          xAxis: {
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          yAxis: [{
            data: ['水', '电', '蒸汽','天然气','压缩空气'],
            inverse: true,
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              color: '#fff',
              fontSize: 18
            }
          },
          {
            type: 'category',
            axisTick: { show: false }, // 不显示刻度线
            axisLabel: {
              color: '#000',
            },
            axisLine: {
              show: false,
            },
            inverse: true,
          }
          ],
          series: [
            {
              name: '进度条',
              yAxisIndex: 0,
              type: 'pictorialBar',
              symbol: 'rect', // 长方形
              symbolRepeat: 'fixed',
              symbolMargin: '2', // 缝隙
              symbolClip: true,
              symbolSize: ['3', '16'],
              barCategoryGap: 5,
              label: {
                show: true,
                position: [0,50],
                fontSize: 14,
                formatter: (name) => namelist[name.dataIndex]
              },
              zlevel: 1, //  zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
              data: [
                {
                  value: 780,
                  itemStyle: {
                    normal: {
                      color: '#047CFF'
                    }
                  }
                },
                {
                  value: 600,
                  itemStyle: {
                    normal: {
                      color: '#EE2800'
                    }
                  }
                },
                {
                  value: 770,
                  itemStyle: {
                    normal: {
                      color: '#FFAD27'
                    }
                  }
                },
                {
                  value: 770,
                  itemStyle: {
                    normal: {
                      color: '#42CEFF'
                    }
                  }
                },
                {
                  value: 770,
                  itemStyle: {
                    normal: {
                      color: '#BF0AFF'
                    }
                  }
                }
              ]
            },
            {
              name: '进度条背景',
              type: 'bar',
              yAxisIndex: 1,
              barGap: '-100%', // 不同系列的柱间距离，为百分比。
              barCategoryGap: 5,
              barWidth: 20,
              left: '50',
              data: [1000, 1000, 1000, 1000, 1000],
              color: 'rgba(152, 144, 238, 0.12)', // 柱条颜色
              itemStyle: {
                normal: {
                    color: function(params) {
                        var colorList = ['rgba(4,124,255,0.4)','rgba(242,104,0,0.4)','rgb(255,224,117,0.4)','	rgb(79,163,255,0.4)','rgb(191,10,255,0.4)'];
                            return colorList[params.dataIndex]
                    },
                    barBorderRadius: [10]//设置圆角
                }
              },
              label: {
                    normal: {
                      show: true, // 是否显示进度条上方的百分比
                      formatter: (series) => datalist[series.dataIndex]+'/1000',
                      position: [913,-20],
                      textStyle: {
                          color: '#000', // 进度条上方百分比字体颜色
                          fontSize: 14
                      }
                    }
                }
            }
          ]
};

2.2进度条

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
	<div style="text-align: center;padding-top: 15px">
		<canvas id="canvas"></canvas>
	</div>
</body>
<script type="text/javascript">
var canvas 		= document.getElementById("canvas");
var context 	= canvas.getContext("2d");
canvas.width 	= 650;
canvas.height 	= 30;

var progress	= 0;
var time 		= window.setInterval(function(){
	progressLine(progress);
	progress ++;
	if(progress > 100){
		progress 	= 0;
		window.clearInterval(time);
	}
}, 15);

function progressLine(num){
	var progress 		= (canvas.width / 100) * num;
	var width 			= canvas.width;
	var height 			= canvas.height;
	context.clearRect(0, 0, width, height);

	//绘制底层背景
	context.beginPath();
	context.fillStyle = "#E4E2E2";
	context.fillRect(0, 0, width, height);
	context.stroke();

	//绘制顶层进度条
	context.beginPath();
	context.fillStyle = "#3B84F9";
	context.fillRect(0, 0, progress, height);
	context.stroke();

	//进度值
	context.beginPath();
	context.fillStyle = "#FFFFFF";
	if(progress > 50){
		context.textAlign 	= "right";
	}else{
		context.textAlign 	= "left";
	}
	context.font 		= "20px Arial";
	context.fillText(num.toFixed(1)+"%", progress, height / 2 + 7);
	context.stroke();
}
</script>
</html>

3.1水球图

3.1.1背景图片

3.1.2下载

npm install echarts --save
npm install echarts-liquidfill --save

3.1.3引入并注册

在 main.js 文件里引入并注册 ( 这里是 Vue3.0 的模板 )

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import echarts from 'echarts'
import 'echarts-liquidfill'
Vue.prototype.$echarts = echarts

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3.1.4在组件中使用

<template>
  <div class='wrapper'>
    <div class="inner">
      <div class='chart' id='chart'></div>
      <div class="btm"></div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  mounted () {
    this.drawChart()
  },
  methods: {
    drawChart () {
      // 基于准备好的dom，初始化echarts实例
      let chart = this.$echarts.init(document.getElementById('chart'))
      // 监听屏幕变化自动缩放图表
      window.addEventListener('resize', function () {
        chart.resize()
      })
      // 绘制图表
      chart.setOption({
        // 图表主标题
        title: {
          text: '全国就业率', // 主标题文本，支持使用 \n 换行
          top: 20, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
          left: 'center', // 值: 'left', 'center', 'right' 同上
          textStyle: { // 文本样式
            fontSize: 30,
            fontWeight: 600,
            color: '#fff'
          }
        },
        // 提示框组件
        tooltip: {
          trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
          textStyle: {
            color: '#fff' // 文字颜色
          },
          // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
          // 水球图: {a}（系列名称），{b}（无），{c}（数值）
          // 使用函数模板   传入的数据值 -> value: number|Array,
          formatter: function (value) {
            return value.seriesName + ': ' + value.data * 100 + '%'
          }
        },
        series: [{
          type: 'liquidFill',
          name: '全国就业率', // 系列名称，用于tooltip的显示，legend 的图例筛选
          radius: '62%', // 水球图的半径
          center: ['50%', '60%'], // 水球图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
          // 水填充图的形状 circle 默认圆形  rect 圆角矩形  triangle 三角形  
          // diamond 菱形  pin 水滴状 arrow 箭头状  还可以是svg的path
          shape: 'circle',
          phase: 0, // 波的相位弧度 不设置  默认自动
          direction: 'right', // 波浪移动的速度  两个参数  left 从右往左 right 从左往右
          outline: {
            show: true,
            borderDistance: 0, // 边框线与图表的距离 数字
            itemStyle: {
              opacity: 1, // 边框的透明度   默认为 1
              borderWidth: 1, // 边框的宽度
              shadowBlur: 1, // 边框的阴影范围 一旦设置了内外都有阴影
              shadowColor: '#fff', // 边框的阴影颜色,
              borderColor: '#41dcd8' // 边框颜色
            }
          },
          // 图形样式
          itemStyle: {
            color: '#4077eb', // 水球显示的背景颜色
            opacity: 0.5, // 波浪的透明度
            shadowBlur: 10 // 波浪的阴影范围
          },
          backgroundStyle: {
            color: '#407bf3', // 水球未到的背景颜色
            opacity: 0.5
          },
          // 图形的高亮样式
          emphasis: {
            itemStyle: {
              opacity: 0.8 // 鼠标经过波浪颜色的透明度
            }
          },
          // 图形上的文本标签
          label: {
            fontSize: 55,
            fontWeight: 400,
            color: '#fff'
          },
          data: [0.62] // 系列中的数据内容数组
        }]
      })
    }
  }
}
</script>

<style scoped>
  .wrapper {
    width: 100%;
  }
  .wrapper .inner {
    position: relative;
    width: 50%;
    height: 500px;
    border: 1px solid #eeeeee;
    margin: 100px 50px 0;
    background: url(../../public/static/bg.png) no-repeat;
    background-size: 100% 100%;
  }
  .wrapper .inner .chart {
    width: 400px;
    height: 400px;
    background: url(../../public/static/fill-border.gif) no-repeat center bottom;
    background-size: 80% 80%;
    margin: 10px auto 0;
  }
  .wrapper .inner .btm {
    width: 320px;
    height: 25px;
    background: url(../../public/static/icon-bot.png) no-repeat;
    background-size: 100% 100%;
    margin: 0 auto;
  }
</style>

3.2水球图

.vue文件代码如下

<template>
  <div class="loadRate">
    <charts :title="'年月日负荷率表图'" :iconClass="'icon-yuanquanquan'">
      <template slot="detail">
        <div class="ymdLoadRate">
          <div id="dayLoadRate" ref="dayLoadRate"></div>
          <div id="mouthLoadRate" ref="mouthLoadRate"></div>
          <div id="yearLoadRate" ref="yearLoadRate"></div>
        </div>
        <div class="desc">
          <div class="descItem">日负荷率</div>
          <div class="descItem">月负荷率</div>
          <div class="descItem">年负荷率</div>
        </div>
        <div class="detail">
          <div class="img">
            <img
              src="@/assets/images/survey_images/survey/month.png"
              alt="月"
            />
            <img src="@/assets/images/survey_images/survey/year.png" alt="年" />
          </div>
          <div class="data">
            <div v-if="allData" class="today">
              {{ allData.loadrate.month_load_rate }}%
            </div>
            <div v-if="allData" class="yesterday">
              {{ allData.loadrate.year_load_rate }}%
            </div>
          </div>
        </div>
      </template>
    </charts>
  </div>
</template>

<script>
// import "@/assets/js/echarts-liquidfill";
import "@/assets/js/echarts-liquidfill.min.js";
import { getLoadRate } from "@/api/surgey";
export default {
  name: "loadRate",
  data() {
    return {
      chartInstanceD: null,
      chartInstanceM: null,
      chartInstanceL: null,
      allData: null, //从服务器中获取的所有的数据
    };
  },
  mounted() {
    this.initChart();
    this.getData();
    this.timer = setInterval(() => {
      this.getData();
    }, 60000);
  },
  methods: {
    // 初始化图表
    initChart() {
      this.chartInstanceD = this.$echarts.init(this.$refs.dayLoadRate);
      this.chartInstanceM = this.$echarts.init(this.$refs.mouthLoadRate);
      this.chartInstanceL = this.$echarts.init(this.$refs.yearLoadRate);
      const initOption = {};
      this.chartInstanceD.setOption(initOption);
      this.chartInstanceM.setOption(initOption);
      this.chartInstanceL.setOption(initOption);
      window.addEventListener("resize", () => {
        this.chartInstanceD.resize();
        this.chartInstanceM.resize();
        this.chartInstanceL.resize();
      });
    },
    // 从服务器获取数据
    async getData() {
      let res = await getLoadRate({});
      if (res.code == 200) {
        this.allData = { ...res.data };
        this.updateChart();
      } else {
        this.$message({
          message: res.msg,
          type: "warning",
        });
      }
    },
    //更新数据
    updateChart() {
      var optionD = {
        series: [
          {
            radius: "75%",
            type: "liquidFill",
            // data: [0.113, 0.12, 0.1, 0.11],
            name: "日负荷率",
            itemStyle: {
              opacity: 0.6,
            },
            emphasis: {
              itemStyle: {
                opacity: 0.9,
              },
            },
            outline: {
              show: false,
            },
            label: {
              fontSize: 33,
            },
            tooltip: {
              show: true,
            },
          },
        ],
      };
      var optionM = {
        series: [
          {
            radius: "75%",
            type: "liquidFill",
            // data: [0.61, 0.62, 0.6, 0.61],
            itemStyle: {
              opacity: 0.6,
            },
            name: "日负荷率",
            emphasis: {
              itemStyle: {
                opacity: 0.9,
              },
            },
            outline: {
              show: false,
            },
            label: {
              fontSize: 33,
            },
            tooltip: {
              show: true,
            },
          },
        ],
      };
      var optionL = {
        series: [
          {
            radius: "75%",
            type: "liquidFill",
            // data: [0.8, 0.81, 0.79, 0.8],
            itemStyle: {
              opacity: 0.6,
            },
            name: "日负荷率",
            emphasis: {
              itemStyle: {
                opacity: 0.9,
              },
            },
            outline: {
              show: false,
            },
            label: {
              fontSize: 33,
            },
            tooltip: {
              show: true,
            },
          },
        ],
      };
      var value1 = this.allData.loadrate.day_load_rate / 100;
      var value2 = this.allData.loadrate.month_load_rate / 100;
      var value3 = this.allData.loadrate.year_load_rate / 100;
      var data1 = [value1, value1, value1, value1];
      var data2 = [value2, value2, value2, value2];
      var data3 = [value3, value3, value3, value3];
      optionD.series[0].data = data1;
      optionM.series[0].data = data2;
      optionL.series[0].data = data3;
      this.chartInstanceD.setOption(optionD);
      this.chartInstanceM.setOption(optionM);
      this.chartInstanceL.setOption(optionL);
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="less" scoped>
.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;
    }
  }
}
</style>