在vue中利用echarts整理数据结构,将数据进行可视化操作,制成echarts条形图,柱状图,圆饼图

echarts折线图,柱形图,圆饼的使用

多看书少吃饭

2804人浏览 · 2022-03-23 16:18:39

多看书少吃饭 · 2022-03-23 16:18:39 发布

echarts官网

Apache ECharts

可以查看官网示例.

代码注释非常详细,做好数据转换是基本功.

以下是完整版代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: rgb(16, 12, 42);
      }
      #container {
        position: fixed;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
      }
      #d1 {
        position: absolute;
        top: 0;
        left: 0;
        width: 61%;
        height: 49%;
      }
      #d2 {
        position: absolute;
        top: 0;
        right: 0px;
        width: 38%;
        height: 100%;
      }
      #d3 {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 61%;
        height: 49%;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="d1"></div>
      <div id="d2"></div>
      <div id="d3"></div>
    </div>
    <script src="./axios.min.js"></script>
    <script src="./echarts.min.js"></script>
    <script>
      //模拟向服务器端发送请求,用echarts可视化加载数据分析结果,
      axios.get('./attention.json').then(res => {
        console.log('受欢迎的8套房源', res)
        //整理数据结构,讲res.data转成data格式
        /*
              res.data:[{attention: 1401,index: 47, title: '弘善家园南向开间，满两年，免增值税', community: '弘善家园'...}...]
              data:{
                  legendData:['弘善家园','康家园']
                  seriesData:[{name:'弘善家园',value:1401},{},{}]
              }
          */
        let data = {
          legendData: [],
          seriesData: [],
        }
        res.data.forEach(item => {
          data.legendData.push(item.community)
          data.seriesData.push({
            name: item.community,
            value: item.attention,
          })
        })
        //添加echarts圆饼图
        let myChart = echarts.init(d3, 'dark')
        let option
        option = {
          title: {
            text: '受欢迎的8套房源',
            subtext: '北京',
            left: '60px',
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)',
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            data: data.legendData,
          },
          series: [
            {
              name: '北京',
              type: 'pie',
              radius: '55%',
              center: ['40%', '50%'],
              data: data.seriesData,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
          ],
        }
        option && myChart.setOption(option)
      })

      //模拟向服务器端发送请求,用echarts可视化加载数据分析结果,
      axios.get('./housetype.json').then(res => {
        console.log('房屋数量分布', res)
        // 添加echarts柱状图
        let myChart = echarts.init(d2, 'dark')
        let option
        //整理数据结构,讲res,data转成labes,values
        //res.data:{'两室一厅':6666,'三室一厅':2011,....}
        //labels:['两室一厅','三室一厅'....]
        //values:[6666,2011]
        let labels = []
        let values = []
        for (key in res.data) {
          if (res.data[key] < 20) {
            continue
          }
          labels.unshift(key)
          values.unshift(res.data[key])
        }
        option = {
          title: {
            text: '北京主城区二手房源户型数量分布',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          },
          legend: {
            right: 20,
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
          },
          yAxis: {
            type: 'category',
            data: labels,
          },
          series: [
            {
              name: '2011',
              type: 'bar',
              data: values,
            },
          ],
        }

        option && myChart.setOption(option)
      })

      //模拟向服务器发送请求,用echarts加载数据分析结果
      axios.get('./price.json').then(res => {
        console.log(res)
        // 整理数据结构,讲res.data转成mseris
        let mseris = []
        for (key in res.data) {
          mseris.push({
            name: key,
            type: 'line',
            data: res.data[key],
          })
        }
        // 制作条形图
        let myChart = echarts.init(d1, 'dark')
        let option
        option = {
          title: {
            text: '北京主城区2021年二手房价走势',
          },
          tooltip: {
            trigger: 'axis',
          },
          legend: {
            data: ['朝阳', '海淀', '东城', '西城'],
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [
              '一月',
              '二月',
              '三月',
              '四月',
              '五月',
              '六月',
              '七月',
              '八月',
              '九月',
              '十月',
              '十一月',
              '十二月',
            ],
          },
          yAxis: {
            type: 'value',
            min: 60000,
            max: 130000,
          },
          series: [
            //我将name中的属性值用手写改了,但是改不改都一样,因为数据是动态变化的,上方已经遍历整理了数据结构
            {
              name: '朝阳',
              type: 'line',
              stack: 'Total',
              data: [120, 132, 101, 134, 90, 230, 210],
            },
            {
              name: '海淀',
              type: 'line',
              stack: 'Total',
              data: [220, 182, 191, 234, 290, 330, 310],
            },
            {
              name: '东城',
              type: 'line',
              stack: 'Total',
              data: [150, 232, 201, 154, 190, 330, 410],
            },
            {
              name: '西城',
              type: 'line',
              stack: 'Total',
              data: [320, 332, 301, 334, 390, 330, 320],
            },
          ],
        }
        //将mseries的数据赋值给series,数据可动态变化
        option.series = mseris
        option && myChart.setOption(option)
      })
    </script>
  </body>
</html>

默认效果如下

如果想要更改主题就可以在定义的时候传递第二个参数,'dark'

更改以后,主题颜色就变成了深色

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^