echarts的使用和响应式

已于 2022-07-01 22:15:15 修改
阅读量1.2k 收藏
点赞数
文章标签： vue
于 2022-07-01 20:36:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/suiyuest/article/details/125565011
版权
本文介绍了在Vue项目中如何安装和使用ECharts库，并通过Element UI的栅格布局实现响应式。详细展示了在不同分辨率下调整图表大小的方法，以及创建多个图表（如7日订单、成交额、地区分布和渠道分布）的示例代码。

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

1.在npm中进行下载

npm install echarts --save

 2.局部引入

import * as echarts from 'echarts'

3.使用栅格进行响应式操作

可以参考 elemnet组件中的 Layout 布局

完整的vue项目中的使用如下：

<template>

  <div class="dashboard-box">

    <!-- 商品数量、未发货、七日订单 -->

    <!--栅格间隔-->

    <el-row :gutter="20">

      <!-- 栅格占据的列数 -->

      <el-col :span="8">

        <el-space direction="vertical">

          <el-card class="box-card">

            <div class="card-content">

              <div>

                <svg t="1656638038042" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2263" width="40" height="40">

                  <path

                    d="M258.233 86.657c18.193 0 33.574 6.328 46.26 18.955 12.627 12.656 18.955 28.081 18.955 46.274v110.933c0 18.179-6.328 33.604-18.955 46.26-12.686 12.656-28.066 18.984-46.26 18.984H147.271c-18.164 0-33.574-6.328-46.23-18.984s-18.984-28.081-18.984-46.26V151.887c0-18.193 6.328-33.618 18.984-46.274 12.656-12.627 28.066-18.955 46.23-18.955h110.962v-0.001z m307.603 0c18.163 0 33.589 6.328 46.229 18.955 12.672 12.656 18.984 28.081 18.984 46.274v110.933c0 18.179-6.313 33.604-18.984 46.26-12.641 12.656-28.066 18.984-46.229 18.984H452.911c-18.149 0-33.574-6.328-46.23-18.984s-18.984-28.081-18.984-46.26V151.887c0-18.193 6.328-33.618 18.984-46.274 12.656-12.627 28.081-18.955 46.23-18.955h112.925v-0.001z m303.677 0c18.193 0 33.617 6.328 46.26 18.955 12.656 12.656 18.984 28.081 18.984 46.274v110.933c0 18.179-6.328 33.604-18.984 46.26-12.643 12.656-28.066 18.984-46.26 18.984H756.616c-18.164 0-33.574-6.328-46.23-18.984s-18.984-28.081-18.984-46.26V151.887c0-18.193 6.328-33.618 18.984-46.274 12.656-12.627 28.066-18.955 46.23-18.955h112.897v-0.001z m-611.28 305.655c18.193 0 33.574 6.328 46.26 18.955 12.627 12.656 18.955 28.066 18.955 46.23v110.991c0 18.149-6.328 33.574-18.955 46.23-12.686 12.656-28.066 18.984-46.26 18.984H147.271c-18.164 0-33.574-6.328-46.23-18.984s-18.984-28.081-18.984-46.23V457.497c0-18.164 6.328-33.574 18.984-46.23 12.656-12.627 28.066-18.955 46.23-18.955h110.962z m307.603 0c18.163 0 33.589 6.328 46.229 18.955 12.672 12.656 18.984 28.066 18.984 46.23v110.991c0 18.149-6.313 33.574-18.984 46.23-12.641 12.656-28.066 18.984-46.229 18.984H452.911c-18.149 0-33.574-6.328-46.23-18.984s-18.984-28.081-18.984-46.23V457.497c0-18.164 6.328-33.574 18.984-46.23 12.656-12.627 28.081-18.955 46.23-18.955h112.925z m303.677 0c18.193 0 33.617 6.328 46.26 18.955 12.656 12.656 18.984 28.066 18.984 46.23v110.991c0 18.149-6.328 33.574-18.984 46.23-12.643 12.656-28.066 18.984-46.26 18.984H756.616c-18.164 0-33.574-6.328-46.23-18.984s-18.984-28.081-18.984-46.23V457.497c0-18.164 6.328-33.574 18.984-46.23 12.656-12.627 28.066-18.955 46.23-18.955h112.897z m-611.28 305.639c18.193 0 33.574 6.328 46.26 18.97 12.627 12.671 18.955 28.052 18.955 46.245v110.962c0 18.149-6.328 33.574-18.955 46.23-12.686 12.656-28.066 18.984-46.26 18.984H147.271c-18.164 0-33.574-6.328-46.23-18.984s-18.984-28.081-18.984-46.23V763.166c0-18.193 6.328-33.574 18.984-46.245 12.656-12.642 28.066-18.97 46.23-18.97h110.962z m307.603 0c18.163 0 33.589 6.328 46.229 18.97 12.672 12.671 18.984 28.052 18.984 46.245v110.962c0 18.149-6.313 33.574-18.984 46.23-12.641 12.656-28.066 18.984-46.229 18.984H452.911c-18.149 0-33.574-6.328-46.23-18.984s-18.984-28.081-18.984-46.23V763.166c0-18.193 6.328-33.574 18.984-46.245 12.656-12.642 28.081-18.97 46.23-18.97h112.925z m303.677 0c18.193 0 33.617 6.328 46.26 18.97 12.656 12.671 18.984 28.052 18.984 46.245v110.962c0 18.149-6.328 33.574-18.984 46.23-12.643 12.656-28.066 18.984-46.26 18.984H756.616c-18.164 0-33.574-6.328-46.23-18.984s-18.984-28.081-18.984-46.23V763.166c0-18.193 6.328-33.574 18.984-46.245 12.656-12.642 28.066-18.97 46.23-18.97h112.897z m0 0"

                    fill="#11EEC2" p-id="2264"></path>

                </svg>

              </div>

              <div class="card-title">

                <div>订单数量</div>

                <div>{{goodsCount}}</div>

              </div>

            </div>

          </el-card>

          <el-card class="box-card">

            <div class="card-content">

              <div>

                <svg t="1656639320715" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8314" width="40" height="40">

                  <path

                    d="M512.603 2.111C230.604 2.111 1.204 198.522 1.204 439.965c0 132.851 71.961 257.752 197.401 342.835 16.694 11.385 39.412 7.012 50.734-9.701 11.328-16.673 6.982-39.374-9.714-50.685C134.531 651.155 74.26 548.222 74.26 439.965c0-201.197 196.631-364.877 438.34-364.877 241.71 0 438.341 163.681 438.341 364.877 0 201.194-196.631 364.875-438.341 364.875-2.263 0-4.203 0.879-6.354 1.282-17.276-3.103-34.775 5.945-40.838 23.021-7.018 19.813-52.935 53.196-107.47 84.143 19.911-66.377 10.373-80.603 3.984-90.057-7.669-11.38-20.456-18.164-34.156-18.164-20.161 0-36.53 16.306-36.53 36.485 0 6.645 1.755 12.844 4.863 18.206-3.691 20.768-19.653 69.366-37.738 113.842-5.626 13.792-2.267 29.63 8.439 39.992 6.942 6.712 16.109 10.254 25.423 10.254 5.006 0 10.048-1.021 14.831-3.139 41.647-18.534 168.544-78.815 214.163-143.25C799.238 873.441 1024 678.926 1024 439.965 1024.002 198.522 794.605 2.111 512.603 2.111L512.603 2.111zM316.597 371.018c-36.197 0-65.653 29.46-65.653 65.653 0 36.2 29.456 65.655 65.653 65.655 36.196 0 65.654-29.457 65.654-65.655C382.253 400.478 352.793 371.018 316.597 371.018L316.597 371.018zM513.562 371.018c-36.197 0-65.655 29.46-65.655 65.653 0 36.2 29.458 65.655 65.655 65.655 36.196 0 65.652-29.457 65.652-65.655C579.212 400.478 549.756 371.018 513.562 371.018L513.562 371.018zM710.522 371.018c-36.199 0-65.656 29.46-65.656 65.653 0 36.2 29.457 65.655 65.656 65.655 36.191 0 65.652-29.457 65.652-65.655C776.175 400.478 746.716 371.018 710.522 371.018L710.522 371.018z"

                    p-id="8315" fill="#1296db"></path>

                </svg>

              </div>

              <div class="card-title">

                <div>未发货</div>

                <div>{{waitStockCount}}</div>

              </div>

            </div>

          </el-card>

        </el-space>

      </el-col>

      <el-col :span="16">

        <div ref="order_sum" class="chart"></div>

      </el-col>

    </el-row>

    <!-- 第二行 -->

    <el-row class="bottom-data">

      <!-- <768px 响应式栅格数或者栅格属性对象 -->

      <!-- ≥768px 响应式栅格数或者栅格属性对象 -->

      <!-- ≥992px 响应式栅格数或者栅格属性对象 -->

      <!-- ≥1200px 响应式栅格数或者栅格属性对象 -->

      <!-- ≥1920px 响应式栅格数或者栅格属性对象 -->

      <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">

        <div ref="order_turnover" class="chart"></div>

      </el-col>

      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">

        <div ref="order_area" class="chart"></div>

      </el-col>

      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">

        <div ref="order_channel" class="chart"></div>

      </el-col>

    </el-row>

  </div>

</template>

<script>

import * as echarts from 'echarts' // 引入组件

import { post } from "@/utils/http" // 封装好的api接口

export default {

  created() {

    this.getEchartData()

  },

  data() {

    return {

      goodsCount: null,  //商品数量

      waitStockCount: null //未发货

    }

  },

  methods: {

    myEcharts(data) {

      let { daysOrder, daysSum, area, channel } = data // 解构赋值

      var myChart, myChart1, myChart2, myChart3

      //初始化7日订单

      myChart = echarts.init(this.$refs.order_sum)// 基于准备好的dom，初始化echarts实例

      myChart.setOption({

        tooltip: {

          trigger: 'axis',

          axisPointer: {

            type: 'shadow'

          }

        },

        title: {

          text: '7日订单',

          // subtext: '订单数',

          left: 'left'

        },

        legend: {

          data: ["订单数"],

          orient: 'vertical',

          right: '10%'

        },

        xAxis: {

          type: 'category',

          data: daysOrder[0]

        },

        yAxis: {

          name: "订单数",

          type: 'value'

        },

        series: [

          {

            name: "订单数",

            data: daysOrder[1],

            type: 'bar',

            barWidth: 35

          }

        ],

        color: ["#00b5ff"],  //柱形颜色

      });

      //7日订单金额

      myChart1 = echarts.init(this.$refs.order_turnover);// 基于准备好的dom，初始化echarts实例

      myChart1.setOption({

        tooltip: {

          trigger: 'axis',

          axisPointer: {

            type: 'shadow'

          }

        },

        title: {

          text: '7日成交额',

        },

        legend: {

          data: ["订单数"],

          orient: 'vertical',

          left: 'right'

        },

        xAxis: {

          type: 'category',

          data: daysSum[0]

        },

        yAxis: {

          name: "订单数",

          type: 'value'

        },

        series: [

          {

            name: "订单数",

            data: daysSum[1],

            type: 'line'

          }

        ]

      });

      //订单地区分布

      myChart2 = echarts.init(this.$refs.order_area);// 基于准备好的dom，初始化echarts实例

      myChart2.setOption({

        tooltip: {

          trigger: 'item'

        },

        title: {

          text: '订单地区分布',

        },

        legend: {

          data: ["地区分布"],

          right: '5%'

        },

        series: [{

          name: '地区分布',

          type: 'pie',

          radius: '80%',

          center: ['50%', '50%'],

          selectedMode: 'single',

          data: area,

          emphasis: {

            itemStyle: {

              shadowBlur: 10,

              shadowOffsetX: 0,

              shadowColor: 'rgba(0, 0, 0, 0.5)'

            }

          }

        }]

      });

      //订单渠道分布

      myChart3 = echarts.init(this.$refs.order_channel);// 基于准备好的dom，初始化echarts实例

      myChart3.setOption({

        title: {

          text: '订单渠道分布',

          left: 'left',

        },

        tooltip: {

          trigger: 'item'

        },

        series: [{

          type: 'pie',

          radius: '80%',

          center: ['50%', '50%'],

          selectedMode: 'single',

          data: channel,

          emphasis: {

            itemStyle: {

              shadowBlur: 10,

              shadowOffsetX: 0,

              shadowColor: 'rgba(0, 0, 0, 0.5)'

            }

          }

        }]

      });

      // 根据窗口调整图片大小

      window.onresize = function () {

        myChart.resize()

        myChart1.resize()

        myChart2.resize()

        myChart3.resize()

      }

    },

    //获取可视化的数据

    getEchartData() {

      post({ _gp: "admin.dashboard", _mt: "integral" }).then(res => {

        let { data, errno, errmsg } = res

        let that = this

        if (200 == errno) {

          that.goodsCount = data.goodsCount  //商品数量

          that.waitStockCount = data.waitStockCount  //未发货

          that.myEcharts(data)

        } else {

          ElMessage.error(errmsg)

        }

      }).catch(err => {

        console.log(err);

      })

    },

  },

}

</script>

<style lang="less" scoped>

@media screen and (max-width: 992px) {

  .card-title {

    display: none;

  }

}

.chart {

  width: 100%;

  height: 400px;

}

.dashboard-box {

  .el-row {

    margin: 20px 0;

    .el-col {

      border-radius: 4px;

      text-align: center;

      .el-card {

        width: 80%;

      }

    }

  }

  .box-card {

    margin-top: 20px;

    .card-content {

      display: flex;

      justify-content: space-around;

      align-items: center;

      .card-title {

        width: 120px;

        div:nth-child(1) {

          color: #999;

          font-weight: 800;

        }

        div:nth-child(2) {

          font-size: 20px;

          color: #575757;

        }

        .div {

          font-size: 18px;

          font-weight: 700;

          color: #666;

          text-align: center;

        }

      }

    }

  }

  .bottom-data {

    .el-col {

      text-align: center;

    }

  }

}

</style>

suiyuest
关注
ECharts 响应式设计
lly202406的博客
06-25 810
首先，在 HTML 中定义一个容器元素，用于容纳 ECharts 图表。
echarts图表响应式宽高
qq_45684708的博客
11-09 660
/*窗口自适应，关键代码*/ setTimeout(function() { window.onresize = function() { myChart.resize();//myChart是图表的名字 }; }, 200);
echarts 响应式
weixin_42213796的博客
10-31 393
let charts = this.$echarts.init(document.getElementById('myChart' + index)) charts.setOption(option); 关键点，添加window.onresize resize() window.onresize = () => { charts.resize(); } ...
实现 ECharts 图表响应式布局：基于 ResizeObserver 的终极方案
最新发布
wusandaofwy的博客
03-28 854
通过的组合方案，可实现精准、高效、安全的图表自适应效果。此方案已在实际项目中验证，支持多场景动态布局，推荐作为 ECharts 响应式开发的标配方案。扩展阅读•ECharts 官方自适应文档•ResizeObserver API 详解效果演示希望这篇博客能帮助开发者彻底解决 ECharts 自适应难题！🚀。
echarts之响应式的实现
weixin_43845137的博客
11-29 1139
目录echarts之响应式的实现BarChart.vue使用组件 echarts之响应式的实现 BarChart.vue <template> <div ref="chartP" class="bar-chart-wrap"> <div :id="id" class="chart"></div> </div> </template> <script> export default { name: "Ba
响应式 React Native Echarts 组件
weixin_34303897的博客
07-12 269
一种在 React Native 中封装的响应式 Echarts 组件，使用与示例请参见：react-native-echarts-demo 近年来，随着移动端对数据可视化的要求越来越高，类似 MPAndroidChart 这样的传统图表库已经不能满足产品经理日益变态的需求。前端领域数据可视化的发展相对繁荣一些，通过 WebView 在移动端使用 Echarts 这样功能强大的前端数据可视化库...
echarts图表响应式的实现
weixin_47531742的博客
12-13 893
echarts图表响应式的实现
ECharts 响应式
12-14
ECharts 响应式设计是为了确保图表在不同设备和屏幕尺寸上都能呈现良好的视觉效果。在ECharts中，图表通常会在用户指定的DOM节点内显示，而为了适应PC和移动设备，ECharts提供了响应式布局的功能。这主要是通过在`...
基于ECharts与Flexible的响应式数字大屏可视化源码
03-25
项目概述：本项目采用JavaScript为主要开发语言，整合了HTML、CSS和Less预处理器技术，构建了一套基于Flexible.js与ECharts.js的响应式数字大屏可视化解决方案。整个项目包含1626个文件，其中主要包括946个Less文件...
基于 Bootstrap与Echarts的响应式页面模板.zip
08-05
Metronic 是一套精美的响应式后台管理模板，基于强大的 Twitter Bootstrap框架实现。 Metronic 拥有简洁优雅的 Metro UI 风格界面，6 种颜色可选，76 个模板页面，包括图表、表格、地图、消息中心、监控面板等后台...
Echarts大屏展示，实现响应式比较常用的方式
liyoro的专栏
05-20 2123
transform: scale实现响应式页面，一篇搞定数据可视化项目。目前用的比较多和稳的一种方式，记录下
使用 ECharts 实现响应式图表：优化移动端用户体验
09-09 1255
为图表选择适合移动设备视觉体验的配色方案和主题，使图表更加美观、易于识别。
实现echarts图表响应式效果
qq_42980124的博客
09-18 6546
echarts图表响应式 最近应项目要求需要做响应式的echarts图表，开始在网上找了各种资源都没有找到如何操作。最后还是靠别人指点做出来的， 其实多看看文档也能明白，不过没那个耐心，哈哈。不多说上干货！下面先举个栗子！ 直接上代码吧！！ function echart_seven(date){ var data = { &quot;bieshu&quot;:[120, 132, 101, 134, 90, 2...
Echarts的响应式布局
zhongjunhaoz的博客
11-18 1184
echarts中的响应式布局。 单个图层 var myChart = this.$echarts.init(this.$refs.depActive)//获取到dom myChart.setOption(this.depActive_option)//渲染dom // 窗口自适应 window.onresize = function() { myChart.resize(); } //但是这种方法只能对一个图层有用，如果同时对多个图层设置的话，只对最后一个图层有用。考虑到在Vue中，通常会把多..
在 VUE 项目中，设置 echarts 图表为响应式布局
qq_36291747的博客
06-28 3691
1. 浏览器页面尺寸变化，图表自动改变尺寸 在 echarts 中绘制图表，都是使用预先指定了一个明确尺寸的 DOM 容器。这也就意味着，图表一旦渲染完成，后续页面尺寸发生变化，图表也不会重新绘制以及改变尺寸。 图表绘制完成后，容器尺寸变小，图表右侧部分被遮住： 这时候，需要手动调用 echarts 实例的 resize 方法来解决。 // resize method resize() { this.chart.resize(); } // mounted 生命钩子中，绑定 resize 事件处理函数
可视化 | Echarts响应式&数据的视觉映射
go
08-18 1626
目录ECharts 响应式ECharts 数据的视觉映射 ECharts 响应式 ECharts 图表显示在用户指定高宽的 DOM 节点（容器）中。 为了实现PC 和 移动设备上都能够很好的展示图表的内容的响应式设计问题，ECharts 完善了组件的定位设置，并且实现了类似 CSS Media Query 的自适应能力。 ECharts 组件的定位和布局 大部分组件和系列会遵循两种定位方式: left/right/top/bottom/width/height 定位方式 这六个(left/right/to
【前端可视化】ECharts 实现响应式图表
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
04-21 832
响应式图片的实现步骤: 1.图表只设置高度，宽度设置为100% 或 不设置。 2.监听窗口的resize事件，即监听窗口尺寸的变化(需节流)。 3.当窗口大小改变时，然后调用 echartsInstance.resize 改变图表的大小。 另外需要注意的是：在容器节点被销毁时，可以调用 echartsInstance.dispose 以销毁echarts的实例释放资源，避免内存泄漏。 &lt...
ECharts与Flexible构建响应式数据可视化大屏
ECharts.js是一个使用JavaScript编写的开源可视化库，提供丰富的图表类型和灵活的配置项，而Flexible.js则主要用于实现响应式布局，以适应不同屏幕尺寸的显示需求。 2. 项目结构与文件组织： 项目总共有1626个文件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值