Vue + echarts【一个页面中引入多个表】

已于 2022-06-27 08:50:24 修改
阅读量7.4k 收藏 93
点赞数 21
文章标签： echarts vue.js 前端
于 2022-05-06 00:15:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51453356/article/details/124600083
版权

文章目录

最近在vue项目中添加了一个数据报表界面，在界面中显示多个不同的图，用到了echarts，并且要动态获取数据，在这里记个笔记，效果图如下，文章最后附源码。

在这里插入图片描述

页面布局

在这里插入图片描述
在这里插入图片描述

<template>
  <div>
    <!-- 搜索框 -->
    <div class="search-form">
      <el-form
        :inline="true"
        :model="searchForm"
        :rules="searchFormRules"
        ref="searchForm"
      >
        <!-- 年份输入框 -->
        <el-form-item label="年份" prop="year">
          <el-date-picker
            v-model="searchForm.year"
            value-format="yyyy"
            type="year"
            placeholder="请选择年份"
          >
          </el-date-picker>
        </el-form-item>
        <!-- 月份输入框 -->
        <el-form-item label="月份" prop="month">
          <el-input v-model.number="searchForm.month" placeholder="请输入月份">
          </el-input>
        </el-form-item>
        <!-- 查询按钮 -->
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- echarts视图 -->
    <div>
      <el-row class="el-row-report">
        <el-col class="el-col-report">
          <div ref="chartYear" class="meetingYear"></div>
        </el-col>
        <el-col class="el-col-report">
          <div ref="chartMeetingType" class="meetingType"></div>
        </el-col>
      </el-row>
      <el-row class="el-row-report">
        <el-col class="el-col-report">
          <div ref="chartMonth" class="meetingMonth"></div>
        </el-col>
        <el-col class="el-col-report">
          <div ref="chartUserType" class="userType"></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

放echarts视图的容器要有大小，才可以显示图表

<style>
.meetingYear {
  width: 100%;
  height: 100%;
}
.meetingMonth {
  width: 100%;
  height: 100%;
}
.meetingType {
  width: 100%;
  height: 100%;
}
.userType {
  width: 100%;
  height: 100%;
}
.el-row-report {
  width: 100%;
  height: auto;
  display: flex;
}
.el-col-report {
  height: 300px;
  margin-top: 10px;
  margin-right: 20px;
  flex: 1;
}
</style>

视图初始化

涉及到图表的配置，具体的配置可以看官网，我这里的折线图和柱状图主要是取消了刻度，网格线，然后指定图形颜色

动态获取标题

柱状图和折线图的标题是根据搜索框数据获取的
在这里插入图片描述
在这里插入图片描述

动态获取图表数据

以第一个表为例，就是根据搜索框的值，发送请求，获取数据
在这里插入图片描述
在这里插入图片描述
这里有个指定月的数据，每个月天数不一样，我写了判断来获得每个月的天数
在这里插入图片描述

  mounted() {
    // 初始化
    // 每年统计
    this.chartYear = echarts.init(this.$refs.chartYear)
    this.chartYear.setOption(this.optionYear)
    // 获取数据
    this.getYearList()

    // 每月统计
    this.chartMonth = echarts.init(this.$refs.chartMonth)
    this.chartMonth.setOption(this.optionMonth)
    // 获取数据
    this.getMonthList()

    // 会议类型
    this.chartMeetingType = echarts.init(this.$refs.chartMeetingType)
    this.chartMeetingType.setOption(this.optionMeetingType)
    // 获取数据
    this.getMeetingTypeList()

    // 用户类型
    this.chartUserType = echarts.init(this.$refs.chartUserType)
    this.chartUserType.setOption(this.optionUserType)
    // 获取数据
    this.getUserTypeList()
  },
    computed: {
    // 年
    optionYear() {
      return {
        title: {
          text: this.yearTitle,
          textStyle: {
            color: '#1f2d3d'
          },
          left: 'center'
        },
        color: ['#304156'],
        xAxis: {
          type: 'category',
          data: [
            '一月',
            '二月',
            '三月',
            '四月',
            '五月',
            '六月',
            '七月',
            '八月',
            '九月',
            '十月',
            '十一月',
            '十二月'
          ],
          axisTick: {
            //去掉x轴刻度
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#8595a8'
            }
          },
          name: '月份'
        },
        yAxis: {
          type: 'value',
          name: '会议数量',
          //去除网格线
          splitLine: { 
            show: false 
          },
          axisLine: {
            lineStyle: {
              color: '#8595a8'
            }
          },
          axisTick: {
            show: false
          },
          //最小刻度设置为1
          minInterval: 1 
        },
        series: [
          {
            data: this.yearData,
            type: 'bar',
            barwidth: '20%'
          }
        ],
        tooltip: {
          trigger: 'item'
        }
      }
    },
    // 月
    optionMonth() {
      return {
        title: {
          text: this.monthTitle,
          textStyle: {
            color: '#1f2d3d'
          },
          left: 'center'
        },
        grid: {
          top: '20%',
          left: '6%',
          right: '8%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.monthDays,
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#8595a8'
            }
          },
          axisTick: {
            //去掉x轴刻度
            show: false
          },
          name: '日期'
        },
        yAxis: {
          type: 'value',
          name: '会议数量',
          axisLine: {
            lineStyle: {
              color: '#8595a8'
            }
          },
          axisTick: {
            show: false
          },
          //去除网格线
          splitLine: { 
            show: false 
          },
          //最小刻度设置为1
          minInterval: 1 
        },
        series: [
          {
            data: this.monthData,
            type: 'line',
            lineStyle: {
              color: '#004C63'
            },
            itemStyle: {
              color: '#004C63'
            },
            //标记的图形（拐点）
            symbol: 'circle', 
            //大小
            symbolSize: 5 
          }
        ],
        tooltip: {
          // axis item none三个值
          trigger: 'axis' 
        }
      }
    },
    // 会议类型
    optionMeetingType() {
      return {
        title: {
          subtext: '会议类型',
          left: 'center',
          top: '43%',
          subtextStyle: {
            fontSize: 18
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          icon: 'circle',
          top: '0',
          left: 'right'
        },
        series: [
          {
            name: '会议数量',
            type: 'pie',
            radius: ['40%', '55%'],
            label: {
              show: true,
              padding: [0, -60],
              overflow: 'none',
              fontSize: '15',
              fontWeight: 'bold',
              formatter: '{d}%\n\n{c}'
            },
            labelLine: {
              show: true,
              length: 15,
              length2: 60
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = ['#3f51b5', '#ffcb89']
                  return colorList[params.dataIndex]
                }
              }
            },
            data: this.meetingTypeData
          }
        ]
      }
    },
    // 用户类型
    optionUserType() {
      return {
        title: {
          subtext: '用户类型',
          left: 'center',
          top: '43%',
          subtextStyle: {
            fontSize: 18
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          icon: 'circle',
          top: '0',
          left: 'right'
        },
        series: [
          {
            name: '用户数量',
            type: 'pie',
            radius: ['40%', '55%'],
            label: {
              show: true,
              padding: [0, -60],
              overflow: 'none',
              fontSize: '15',
              fontWeight: 'bold',
              formatter: '{d}%\n\n{c}'
            },
            labelLine: {
              show: true,
              length: 15,
              length2: 60
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = ['#005ea1', '#45c0ff', '#ffcb89']
                  return colorList[params.dataIndex]
                }
              }
            },
            data: this.userTypeData
          }
        ]
      }
    },
    // echarts标题
    yearTitle() {
      return this.searchForm.year + '年会议统计'
    },
    monthTitle() {
      return this.searchForm.year + '年' + this.searchForm.month + '月会议统计'
    }
  },

源码

src\views\meeting\report\index.vue

<template>
  <div>
    <!-- 搜索框 -->
    <div class="search-form">
      <el-form
        :inline="true"
        :model="searchForm"
        :rules="searchFormRules"
        ref="searchForm"
      >
        <!-- 年份输入框 -->
        <el-form-item label="年份" prop="year">
          <el-date-picker
            v-model="searchForm.year"
            value-format="yyyy"
            type="year"
            placeholder="请选择年份"
          >
          </el-date-picker>
        </el-form-item>
        <!-- 月份输入框 -->
        <el-form-item label="月份" prop="month">
          <el-input v-model.number="searchForm.month" placeholder="请输入月份">
          </el-input>
        </el-form-item>
        <!-- 查询按钮 -->
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- echarts视图 -->
    <div>
      <el-row class="el-row-report">
        <el-col class="el-col-report">
          <div ref="chartYear" class="meetingYear"></div>
        </el-col>
        <el-col class="el-col-report">
          <div ref="chartMeetingType" class="meetingType"></div>
        </el-col>
      </el-row>
      <el-row class="el-row-report">
        <el-col class="el-col-report">
          <div ref="chartMonth" class="meetingMonth"></div>
        </el-col>
        <el-col class="el-col-report">
          <div ref="chartUserType" class="userType"></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {
  getMonthMeetingNum,
  getYearMeetingNum,
  getMeetingType,
  getUserType
} from '@/api/report'

export default {
  data() {
    return {
      loading: false,
      timer: null,
      // 视图
      chartMonth: null,
      chartYear: null,
      chartMeetingType: null,
      chartUserType: null,
      // 数据
      yearData: [],
      monthData: [],
      meetingTypeData: [],
      userTypeData: [],
      // 查询表单
      searchForm: {
        year: '2022',
        month: '4'
      },
      // 查询表单校验规则
      searchFormRules: {
        year: [{ required: true, message: '请选择年份' }],
        month: [
          { required: true, message: '请输入月份' },
          { type: 'number', message: '请输入正确月份', min: 1, max: 12 }
        ]
      },
      // 每月天数
      monthDays: []
    }
  },
  mounted() {
    // 初始化
    // 每年统计
    this.chartYear = echarts.init(this.$refs.chartYear)
    this.chartYear.setOption(this.optionYear)
    this.getYearList()

    // 每月统计
    this.chartMonth = echarts.init(this.$refs.chartMonth)
    this.chartMonth.setOption(this.optionMonth)
    this.getMonthList()

    // 会议类型
    this.chartMeetingType = echarts.init(this.$refs.chartMeetingType)
    this.chartMeetingType.setOption(this.optionMeetingType)
    this.getMeetingTypeList()

    // 用户类型
    this.chartUserType = echarts.init(this.$refs.chartUserType)
    this.chartUserType.setOption(this.optionUserType)
    this.getUserTypeList()
  },
  methods: {
    // 年数据列表
    getYearList() {
      this.loading = true
      let list = Array(12).fill(0)
      getYearMeetingNum(this.searchForm.year).then((res) => {
        if (res) {
          this.loading = false
          for (let i = 0; i < res.data.length; i++) {
            list[res.data[i].month - 1] = res.data[i].count
          }
          this.yearData = list
          this.chartYear.setOption(this.optionYear)
        }
      })
    },
    // 月数据列表
    getMonthList() {
      this.loading = true
      let year = parseInt(this.searchForm.year)
      let month = parseInt(this.searchForm.month)
      // 在查询一个新的月份记录前，将原来的日期数清空
      this.monthDays = []
      getMonthMeetingNum(year, month).then((res) => {
        if (res) {
          this.loading = false
          let days = [0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
          if ((year % 4 === 0 || year % 100 === 0) && year % 400 === 0) {
            days[2] = 29
          } else {
            days[2] = 28
          }
          // 设置指定月的天数
          for (let i = 0; i < days[month]; i++) {
            this.monthDays[i] = i + 1
          }
          let list = Array(days[month]).fill(0)
          for (let i = 0; i < res.data.length; i++) {
            list[res.data[i].day - 1] = res.data[i].count
          }
          this.monthData = list
          this.chartMonth.setOption(this.optionMonth)
        }
      })
    },
    // 会议类型数据
    getMeetingTypeList() {
      getMeetingType().then((res) => {
        if (res) {
          this.meetingTypeData = res.data
          this.chartMeetingType.setOption(this.optionMeetingType)
        }
      })
    },
    // 用户类型数据
    getUserTypeList() {
      getUserType().then((res) => {
        if (res) {
          this.userTypeData = res.data
          this.chartUserType.setOption(this.optionUserType)
        }
      })
    },
    search() {
      this.getYearList()
      this.getMonthList()
    }
  },
  computed: {
    // 年
    optionYear() {
      return {
        title: {
          text: this.yearTitle,
          textStyle: {
            color: '#1f2d3d'
          },
          left: 'center'
        },
        color: ['#304156'],
        xAxis: {
          type: 'category',
          data: [
            '一月',
            '二月',
            '三月',
            '四月',
            '五月',
            '六月',
            '七月',
            '八月',
            '九月',
            '十月',
            '十一月',
            '十二月'
          ],
          axisTick: {
            //去掉x轴刻度
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#8595a8'
            }
          },
          name: '月份'
        },
        yAxis: {
          type: 'value',
          name: '会议数量',
          //去除网格线
          splitLine: { 
            show: false 
          },
          axisLine: {
            lineStyle: {
              color: '#8595a8'
            }
          },
          axisTick: {
            show: false
          },
          //最小刻度设置为1
          minInterval: 1 
        },
        series: [
          {
            data: this.yearData,
            type: 'bar',
            barwidth: '20%'
          }
        ],
        tooltip: {
          trigger: 'item'
        }
      }
    },
    // 月
    optionMonth() {
      return {
        title: {
          text: this.monthTitle,
          textStyle: {
            color: '#1f2d3d'
          },
          left: 'center'
        },
        grid: {
          top: '20%',
          left: '6%',
          right: '8%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.monthDays,
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#8595a8'
            }
          },
          axisTick: {
            //去掉x轴刻度
            show: false
          },
          name: '日期'
        },
        yAxis: {
          type: 'value',
          name: '会议数量',
          axisLine: {
            lineStyle: {
              color: '#8595a8'
            }
          },
          axisTick: {
            show: false
          },
          //去除网格线
          splitLine: { 
            show: false 
          },
          //最小刻度设置为1
          minInterval: 1 
        },
        series: [
          {
            data: this.monthData,
            type: 'line',
            lineStyle: {
              color: '#004C63'
            },
            itemStyle: {
              color: '#004C63'
            },
            //标记的图形（拐点）
            symbol: 'circle', 
            //大小
            symbolSize: 5 
          }
        ],
        tooltip: {
          // axis item none三个值
          trigger: 'axis' 
        }
      }
    },
    // 会议类型
    optionMeetingType() {
      return {
        title: {
          subtext: '会议类型',
          left: 'center',
          top: '43%',
          subtextStyle: {
            fontSize: 18
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          icon: 'circle',
          top: '0',
          left: 'right'
        },
        series: [
          {
            name: '会议数量',
            type: 'pie',
            radius: ['40%', '55%'],
            label: {
              show: true,
              padding: [0, -60],
              overflow: 'none',
              fontSize: '15',
              fontWeight: 'bold',
              formatter: '{d}%\n\n{c}'
            },
            labelLine: {
              show: true,
              length: 15,
              length2: 60
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = ['#3f51b5', '#ffcb89']
                  return colorList[params.dataIndex]
                }
              }
            },
            data: this.meetingTypeData
          }
        ]
      }
    },
    // 用户类型
    optionUserType() {
      return {
        title: {
          subtext: '用户类型',
          left: 'center',
          top: '43%',
          subtextStyle: {
            fontSize: 18
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          icon: 'circle',
          top: '0',
          left: 'right'
        },
        series: [
          {
            name: '用户数量',
            type: 'pie',
            radius: ['40%', '55%'],
            label: {
              show: true,
              padding: [0, -60],
              overflow: 'none',
              fontSize: '15',
              fontWeight: 'bold',
              formatter: '{d}%\n\n{c}'
            },
            labelLine: {
              show: true,
              length: 15,
              length2: 60
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = ['#005ea1', '#45c0ff', '#ffcb89']
                  return colorList[params.dataIndex]
                }
              }
            },
            data: this.userTypeData
          }
        ]
      }
    },
    // echarts标题
    yearTitle() {
      return this.searchForm.year + '年会议统计'
    },
    monthTitle() {
      return this.searchForm.year + '年' + this.searchForm.month + '月会议统计'
    }
  },
  destroyed() {
    clearInterval(this.timer)
  }
}
</script>

<style>
.meetingYear {
  width: 100%;
  height: 100%;
}
.meetingMonth {
  width: 100%;
  height: 100%;
}
.meetingType {
  width: 100%;
  height: 100%;
}
.userType {
  width: 100%;
  height: 100%;
}
.el-row-report {
  width: 100%;
  height: auto;
  display: flex;
}
.el-col-report {
  height: 300px;
  margin-top: 10px;
  margin-right: 20px;
  flex: 1;
}
</style>

src\api\report.js

// 大屏数据
import {
  axios
} from '@/utils/request'

// 每年
export function getYearMeetingNum(year) {
  return axios({
    url: '/api/v1/report/year/' + year,
    method: 'get',
  })
}

// 每月
export function getMonthMeetingNum(year, month) {
  return axios({
    url: `/api/v1/report/year/${year}/month/${month}`,
    method: 'get',
  })
}

// 会议类型
export function getMeetingType() {
  return axios({
    url: '/api/v1/report/meetingType',
    method: 'get'
  })
}

// 用户类型
export function getUserType() {
  return axios({
    url: '/api/v1/report/userType',
    method: 'get'
  })
}
洋溢不吃香菜
关注
  • 21
    点赞
  • 踩
  • 93
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
Echarts实现一个html页面同时显示多个图表
懒惰的小妖
06-05 2万+
最近小编开发前端页面,根据需求做一个统计分析的页面. 需求是:Echarts实现一个html页面同时显示多个图表,布局为左右,右边有分上下的布局. 如图所示: 参考文档:https://www.echartsjs.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts 步骤:1.先进行div中布...
完美解决vue 中多个echarts图表自适应的问题
12-28
看代码吧~ 　　 mounted () { this.selfAdaption () }, methods: { //echarts自适应 selfAdaption () { const self = this； setTimeout(() => { [removed] = function () { self.$refs.echarts.resize()
Vue环境下，在单页面中遍历显示出多个Echarts图表(1)
2401_84150168的博客
04-20 165
自定义宽高的dom，用于放置图表。v-for 遍历父级div。
ECharts的多图表联动(柱状图联动图表,饼图与柱状图的联动图表)
最新发布
wqqstudy的博客
05-22 1645
ECharts的多图表联动(柱状图联动图表,饼图与柱状图的联动图表) 利用某学院2019年和2020年的专业招生情况绘制柱状图联动图表； 利用某大学各专业2016-2020年的招生情况绘制饼图与柱状图的联动图表；
单页面快速渲染多个echarts图形，适用于大屏显示
qq_38948398的博客
03-27 2143
建议： 前端本地设置多个变量，暂存多个图形echarts的option配置对象，例如: option1: { grid: { // 图标距离容器的边距 left: '10%', right: '5%', bottom: '20%', top: '10%', scontainLabel: true }...
echarts实现一个页面同时显示多个图表
热门推荐
weixin_38981413的博客
12-27 9万+
一个JSON数据，通过echarts实现一个页面同时显示多个图表，我这是通过写一个option实现多个图表（折线图，饼图，关系图）展示，也就是说只要一个div（dom对象），实现多个不同形状的图表展示。总体采用了LayUI（表格）+eCharts技术，通过在html页面，引入自定义的js，实现预期页面效果。 自己在网上找了下，没有找到对应的文章，直接来说怎么实现，所以特意写了此文章，共同学习。总结技巧：1.先用最少的代码显示出图 2.【关键点】自己能控制每个图在指定的地方的显示 3.确定每个图位置，整体布
echarts实现一个页面同时显示多个不同形状的图表/动态往图表中存放数据
一只爱吃糖的小羊
04-11 3万+
最近做的一个项目的其中一个页面有图表展示数据的需求，有柱状图、折线图和饼图，于是引入了强大的echarts. echarts的强大之处和有点这里就不多说了，详细请参照echarts官网和echarts在线demo。 但是我们的页面要展示的数据比较多，同一个页面有数个折线图、柱状图和饼图。项目引入echarts的方法是模块化引入，于是就有了一个问题：怎么在同一个页面用echarts同时展示多个图...
Echarts3.0：实现一个页面放多个Echarts图表的方法
Bruce Tu的专栏
08-16 1万+
在Echarts3.0下，一个页面放多个Echarts图表变得非常简单，下面是一种在一个页面放置多张echarts图的方法。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min
Vue环境下，在单页面中遍历显示出多个Echarts图表
商务合作 | 共同学习 | 携手共进
12-02 9万+
在开发的过程中我们常常会用到 Echarts 图表，而有时候一个页面当中会有多处都使用到相同的一个图表只是数据有所差别；这个时候如果我们去一个个重新创建 dom、重新渲染，那就太麻烦了，代码量多不说还不便于修改。 最好的方法就是借助Vue框架的便捷性，通过 v-for 来将一个已经创建好的图表进行遍历，显示出多个图表，随后动态修改数据。 本文以横向柱状图为例。 Apache ECharts 的安装与引入此处省略，详情参见Handbook - Apach...
echarts一个option实现多图表布局的案例
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
03-13 1816
function getArrayValue(array, keys) { var keys = keys || "value"; var res = []; if (array) { array.forEach(function(t) { res.push(t[keys]); }); } retur...
基于vue+echarts 数据可视化大屏展示的方法示例
10-15
在Vue组件中使用ECharts，首先要在模板中创建一个用于绘制图表的DOM元素，然后在`mounted`生命周期钩子中初始化ECharts实例并设置图表配置。以下是一个简单的例子： ```html , height: '300px'}"> export ...
vue+echarts实现动态绘制图表及异步加载数据的方法
10-17
然后，在 Vue 组件的模板中创建一个用于显示图表的 DOM 容器： ```html ; height: 600px;"> ``` 在 Vue 组件的 `mounted()` 生命周期钩子中初始化 Echarts 实例，并在 `methods` 中定义绘制图表的方法： ```...
解决vue一个页面中复用同一个echarts组件的问题
01-19
因为页面中要用echarts图表的地方比较多，所以封装了组件，方便复用，如图： 我需要这样一个饼图，并且接下来在很多次地方要用到。 直接复制官网的代码，再改改数据，需要用的时候直接拿来用。 但是接下来出现了一...
vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置）
10-17
在本文中，我们将探讨如何使用Vue.js和ECharts库来创建一个可拖动节点的折线图，并且支持拖动方向和上下限的设置。首先，我们要了解Vue和ECharts的基本概念。 Vue.js是一个轻量级的前端JavaScript框架，它采用组件...
一个页面上多个echart图表的自适应问题，亲测有效！！！（作者是Vue2项目）
weixin_42627850的博客
02-06 1406
EChart图一个页面多个图表自适应问题解决方法
echarts 一个dom重复生成图表
Weather_的博客
09-18 744
清空之前的图表 var myChart = null; document.getElementById(name).innerHTML = ""; document.getElementById(name).removeAttribute("_echarts_instance_"); myChart = echarts.init(document.getElementById(name));
vue动态生成多个Echarts图表
weixin_47163986的博客
03-09 6025
vue动态生成多个Echarts图表 首先先动态的获取到id <div v-for="(item,index) in chartList" :key="index"> <div :id="`chart${index}`"></div> </div> 其次获取后端返回的数据 this.chartList = res.data.data.chartList;//从后台获取数据 if (this.chartList.length > 0) { thi
vue+echarts
05-10
Vue 和 ECharts 都是非常流行的前端技术，Vue 是一个渐进式 JavaScript 框架，用于构建用户界面，而 ECharts 是一个基于 Canvas 的开源可视化库，用于创建丰富的交互式图表和地图。 如果你想在 Vue 中使用 ECharts，可以通过 npm 安装 ECharts，然后在 Vue 组件中引入 ECharts 库并使用它们的 API 来创建图表。一些常用的图表类型，例如折线图、柱状图和饼图等，都可以通过 ECharts 提供的配置选项进行配置和绘制。 以下是一个简单的示例代码，用于在 Vue 中使用 ECharts 创建一个折线图： ```javascript <template> <div> <div ref="chart" style="width: 100%; height: 500px;"></div> </div> </template> <script> import echarts from 'echarts' export default { mounted() { const chartDom = this.$refs.chart const myChart = echarts.init(chartDom) const option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }] } myChart.setOption(option) } } </script> ``` 在这个例子中，我们使用了 Vue 的 `mounted` 生命周期钩子来在组件加载后初始化 ECharts 实例，并使用 `refs` 引用了一个 DOM 元素，用于在页面中渲染图表。在 ECharts 的配置选项中，我们定义了图表的 `xAxis` 和 `yAxis`，以及数据系列 `series`，然后使用 `setOption` 方法将配置应用到图表实例中。 当然，这只是一个简单的示例，ECharts 可以创建更为复杂的图表，你可以通过查阅 ECharts 的文档来了解更多的用法和配置选项。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值