echar案例

最新推荐文章于 2025-02-12 15:12:03 发布

*初级小白*~

最新推荐文章于 2025-02-12 15:12:03 发布

阅读量714

点赞数

分类专栏： echarts 文章标签： echarts 前端 vue.js

本文链接：https://blog.youkuaiyun.com/ScumStudy/article/details/121334948

版权

echarts 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何在Vue.js项目中使用ECharts进行数据可视化，包括图表配置、数据动态更新及交互功能实现，展示了ECharts在前端开发中的强大功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>
    .container {
      position: fixed;
      top: 10px;
      left: 10px;
      right: 10px;
      bottom: 10px;
    }

    #d1 {
      position: absolute;
      top: 0;
      left: 0;
      width: 61%;
      height: 49%;
      /* background-color: rgb(248, 197, 197); */
    }

    #d2 {
      position: absolute;
      top: 0;
      right: 0;
      width: 38%;
      height: 100%;
      /* background-color: rgb(185, 185, 247); */
    }

    #d3 {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 61%;
      height: 49%;
      background-color: rgb(177, 245, 177);
    }
    body{
      background-color: rgba(16,12,42);
    }
  </style>
</head>

<body>
  <div class="container">
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
  </div>
  <script src="./axios.min.js"></script>
  <script src="./echarts.min(1).js"></script>
  <script>
    //显示第一张表，1、发送请求访问 price.json  2、初始化显示图表
    axios.get('price.json').then(res => {
      // console.log(res);
      // 整理res.data中的数据的数据结构，始之匹配图表的series结构
      let mseries = []
      for (key in res.data) {
        mseries.push({
          name: key,
          type: 'line',
          data: res.data[key]
        })
      }
      // console.log(mseries);

      //显示图表
      let mchart = echarts.init(document.getElementById('d1'),'dark')
      let option = {
        // 标题
        title: {
          text: '2020年北京主城区二手房价趋势'
        },
        // 提示
        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'
        },
        series: mseries
      };
      mchart.setOption(option)
    })


    //显示第二张表
    axios.get('housetype.json').then(res => {
      // console.log(res);
      //整理两个变量labels与values，才可以绘制下表
      //labels：户型字符串数组， values：户型对应数量的值数组
      //res.data:{}
      let labels = []
      let values = []
      for (key in res.data) {
        if (res.data[key] < 20) continue;
        labels.unshift(key)
        values.unshift(res.data[key])
      }
      // console.log(labels);
      // console.log(values);

      let mchart = echarts.init(document.getElementById('d2'),'dark')
      let option = {
        title: {
          text: '北京主城区二手房户型数量分布'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          right: '20px'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: labels
        },
        series: [{
          name: '2020',
          type: 'bar',
          data: values
        }]
      };
      mchart.setOption(option)
    })

    //显示第三张图表
    axios.get('attention.json').then(res => {
      console.log(res);
      //将res.data获取到的数据整理成饼状图所需要的数据结构
      //res.data:[{id:xx,title:xx.community:xx,attention:xx....}]
      //legendDate: (8) ["弘善家园", "康家园", "远见名苑", "荣丰2008", "天时名苑", "龙锦苑东一区", "西直门北大街43号院", "龙博苑二区"]
      //seriesData:[{name: "弘善家园", value: 1401},{name: "康家园", value: 1005}]
      let data = {
        legendDate: [],
        seriesData: []
      }
      res.data.forEach(item => {
        data.legendDate.push(item.community)
        data.seriesData.push({
          name: item.community,
          value: item.attention
        })
      });
      console.log(data);


      let mchart = echarts.init(document.getElementById('d3'),'dark')
      // const data = genData(50);
      let option = {
        title: {
          text: '最受关注度的8套房源信息',
        },
        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: '60%',
          center: ['40%', '50%'],
          data: data.seriesData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      };
      mchart.setOption(option)
    })
  </script>
</body>

</html>

在这里插入图片描述