vue项目中使用echarts

最新推荐文章于 2024-04-22 15:28:53 发布
最新推荐文章于 2024-04-22 15:28:53 发布
阅读量1k 收藏 10
点赞数 1
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43503080/article/details/106636030
版权

1、安装

npm install echarts --save

下方是我微信公众号的二维码，可以扫码关注以下，后期博文推送主要在公众号上面，有什么问题也可以通过公众号跟我发消息哦~
在这里插入图片描述

2、使用
在需要用到的页面引入

import echarts from 'echarts'

以下分别举例饼图、折线图、柱状图

一、例1（饼图）：
在这里插入图片描述

 <!-- 图表 -->
 <template>
 
    <div>
      <div style="height:400px;" ref="chart"></div>
    </div>
    
</template>

<script>
import echarts from 'echarts'
export default {
  mounted() {
    this.chartInit()
  },
  methods: {
    chartInit() {
      const myChart = echarts.init(this.$refs.chart);
      const colors = ['#6CCCEB', '#FF8F4B', '#FFEF83', '#6FE59C'];   // 定义饼块的颜色系列
      let option = {
        title: {
          text:  'xxx统计图',  // 标题
          left: 'center'      // 设置标题居中
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 80,     // 离右侧的距离（备注的饼图饼块的名称离右侧的距离 如上图右侧展示）
          top: 20,       // 离上方的距离
          data: ['3000元以下', '3000-4000元', '4000-5000元', '5000元以上']
        },
        series: [
          {
            name: '薪资',   //  鼠标放在每个饼块上显示的饼块类别
            type: 'pie',   
            radius: '55%',
            center: ['50%', '50%'],    // 饼图位置
            data: [
              {
                value: 20,     // 用来算饼块占比
                name: '3000元以下',
                itemStyle: {    // 饼块的颜色
                  color: colors[0]
                },
              },
              {
                value: 30, name: '3000-4000元',
                itemStyle: {
                  color: colors[1]
                },
              },
              {
                value: 20,
                name: '4000-5000元',
                itemStyle: {
                  color: colors[2]
                },              
              },
              {
                value: 30,
                name: '5000元以上',
                itemStyle: {
                  color: colors[3]
                },              
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',   // 鼠标放在饼块时的阴影
              }
            },
          }
        ]
      };
      myChart.setOption(option);

    },
  }
}
</script>

一、例2（柱状图）：
在这里插入图片描述

<template>
    <!-- 柱状图 -->
    <div>
      <div style="height:400px;" ref="chart"></div>
    </div>
</template>

<script>
import echarts from 'echarts'
export default {
  mounted() {
    this.chartInit()
  },
  methods: {
    chartInit() {
      const myChart = echarts.init(this.$refs.chart);
      let option = {
        title: {
          text: 'xxx统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['浏览数', '申请数'],
          right: 120,
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六'],
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              show: false  // 去掉y轴默认的横线
            }
          }
        ],
        series: [
          {
            name: '浏览数',
            type: 'bar',
            barWidth: 20,  // 柱状图 宽度20px
            data: [8, 5, 0, 3, 1, 7],
            label: {  //标记数量
              normal: {
                show: true,
                position: 'top'
              }
            },
            itemStyle: {   //  设置柱状图颜色
              color: '#FF624A'
            },
          },
          {
            name: '申请数',
            type: 'bar',
            barWidth: 20, // 柱状图 宽度
            data: [5, 1, 6, 4, 0, 2],
            label: {  //标记数量
              normal: {
                show: true,
                position: 'top'
              }
            },
            itemStyle: {
              color: '#6FE59B'
            },
          }
        ]
      };
      myChart.setOption(option);

    },

  }
}
</script>

一、例2（折线图）：
在这里插入图片描述

<template>
    <!-- 折线图 -->
    <div>
      <div style="height:400px;" ref="chart"></div>
    </div>
</template>

<script>
import echarts from 'echarts'
export default {
  mounted() {
    this.chartInit()
  },
  methods: {
    chartInit() {
      const myChart = echarts.init(this.$refs.chart);
      let option = {
        title: {  //标题
          text: 'xxx报表',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: ['第1周', '第2周', '第3周', '第4周'],

        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false  // 去掉y轴默认的横线
          }
        },
        series: [
          {
            data: [0, 30, 23, 41],
            type: 'line',
            smooth: true,    // 是否是平滑线条
            itemStyle: {
              borderWidth: 2,       // // 折线与x轴虚线相交处的小点颜色线大小
              borderColor: '#fe472b',    // 折线与x轴虚线相交处的小点颜色
              color: '#fe472b'    // 折线颜色
            },
            label: {  //标记数量
              normal: {
                show: true,
                position: 'top'
              }
            },
            markLine: { // x轴虚线
              symbol: ['none', 'none'],
              label: { show: false },
              lineStyle: {   // 虚线颜色
                color: '#ccc',
              },
              data: [
                { xAxis: 0 },  // x轴虚线位置
                { xAxis: 1 },
                { xAxis: 2 },
                { xAxis: 3 }
              ]
            },
          }
        ]
      };
      myChart.setOption(option);

    },
   
    }
  }
}
</script>

**

实际应用：echarts 数据通过调接口获取

**
在这里插入图片描述

<template>
  <div class="page">
    <p>{{eName}}统计数据</p>
    <div class="search">
      <ul class="search-list">
        <li :class="{'white': true, 'active': isActive==index, 'white-color':isActive==index }" v-for="(item,index) in searchList" :key="index" @click="handleClick(item,index)">{{item.title}}</li>
      </ul>
      <el-button type="primary" size="small"  @click="handleExport">下载</el-button>
    </div>

    <!-- 图表 -->
    <div class="charts" v-if="!show">
      <div style="height:400px;" ref="chart"></div>
    </div>
    <!-- 统计表格 -->
    <div class="data">
      <el-table :data="tableData" style="width: 100%"  id="exportTable">
        <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
        <el-table-column prop="keyName" :label="this.title" align="center"></el-table-column>
        <el-table-column prop="value" label="总数" align="center"></el-table-column>
        <el-table-column prop="result" label="百分比" align="center"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'  // 图表
import { countOfApplyResumeGroupBy } from '@/apis/apis'
import FileSaver from 'file-saver'  // 下载表格数据
import XLSX from 'xlsx'  // 下载表格数据
export default {
  data() {
    return {
      isActive: 0, 
      searchList: [
        { title: "性别", tag: "sex" },
        { title: "年龄", tag: "age" },
        { title: "学历", tag: "edu" },
        { title: "工作经验", tag: "work_age" },
      ],
      title: '性别',
      groupType: '',        // title(性别) 对应的英文（传给后台）
      pieData: [],          //饼图数据
      menuList: [],         // 饼图右上方标注
      colors: ['#6CCCEB', '#FFEF83', '#6FE59C', '#FF8F4B', '#FDBC3C', '#B9C5DD', '#6089D9', '#30BEEC'],   // 饼图每块的颜色
      show: false,   //是否显示图表
      tableData: [],  // 统计表格数据
      id: '',
      eName: '',
    }
  },
  created() {
    this.id = this.$route.query.id;
    this.eName= this.$route.query.name;
    this.getList();
  },
  methods: {
    //获取饼图数据
    getList() {
      let params = {
        id: this.id,
        groupType: this.groupType || 'sex'  // 刚开始传sex，和title对应
      }
      countOfApplyResumeGroupBy({ data: params }).then(res => {
        if (res.code == 0) {
          this.pieData = [];   //  清空饼图数据
          if (res.data.length == 0) {   // 如果没有数据，饼图部分隐藏
            this.show = true
            return;
          }
          this.menuList = res.data.map(element => element.keyName);  //饼图上方右侧标注
          res.data.forEach((element, index) => {
            this.tableData = res.data;
            this.pieData.push({
              value: element.value,
              name: element.keyName,
              itemStyle: { color: this.colors[index] }
            })
          });
          this.chartInit()    // 渲染饼图
        }
      })
    },
    //饼图
    chartInit() {
      const myChart = echarts.init(this.$refs.chart);
      let option = {
        title: {
          text: this.title + '统计图',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 80,
          top: 20,
          // data: ['3000元以下', '3000-4000元', '4000-5000元', '5000元以上'],
          data: this.menuList,
        },
        series: [
          {
            name: this.title,
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            // data: [
            //   {
            //     value: 20,
            //     name: '3000元以下',
            //     itemStyle: {  color: colors[0]  // 饼块的颜色 },
            //   },
            // ],
            data: this.pieData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    //点击切换类目： 性别、年龄等
    handleClick(item, index) {
      this.isActive = index;
      this.title = item.title;
      this.groupType = item.tag;
      this.getList();  // 获取数据，渲染饼图
    },

    //下载
    handleExport() {
      this.$confirm('该操作将导出统计数据，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let exportTable = XLSX.utils.table_to_book(document.querySelector('#exportTable'))
        let exportTableOut = XLSX.write(exportTable, { bookType: 'xlsx', bookSST: true, type: 'array' })
        try {
          FileSaver.saveAs(new Blob([exportTableOut], { type: 'application/octet-stream' }), `${this.title}统计.xlsx`)
        } catch (e) { if (typeof console !== 'undefined') console.log(e, exportTableOut) }
        return exportTableOut;
      }).catch(() => { });
    },
  }
}
</script>

<style lang="less" scoped>
.page {
  .search {
    color: #333;
    .search-list {
      li {
        width: 100px;
        line-height: 34px;
        text-align: center;
        font-size: 14px;
        display: inline-block;
        margin-right: 20px;
      }
      .active {
        background-color: #ff6750;
      }
    }
  }
  .data {
    padding: 20px 40px 50px 40px;
  }
}
</style>
weixin_43503080
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue项目中使用ECharts构建交互式中国地图的详细指南
03-16
本指南为您提供了在Vue项目中创建和展示中国地图的详尽步骤。通过结合ECharts强大的数据可视化能力，您将学习如何安装必要的库、获取和集成中国地图的JSON数据，以及如何在Vue组件中配置和初始化地图实例。此外，本...
VUE3.2 + vue-echarts + DataV 数据可视化大屏（项目）
CLONG_521的博客
03-08 7211
VUE3.2+VUE-echarts+DataV 数据可视化界面（项目）
Vue封装Echarts子组件 动态更新图表展示（）
weixin_43105912的博客
08-26 426
vue子组件传参
快速上手echarts，一分钟生成你的图表，在Vue中使用echarts地图等常用类型，
2301_80868127的博客
03-06 534
以Vue2为例，下载完成后在main.js文件中引入我们的echarts库，由于Vue2的特性所致，我们可以获取到Vue全局对象，所以我们。可以看到一个图表就生成了，具体的数据大家可以参考官网提供的示例，里面包含了大部分的图表配置，也可以查看配置手册定制自己的图表，以上就实现了一个地图组件了，echarts作为非常热门的可视化库，在前端开发中常常会有它的身影，所以你学会了吗~~做完这些，后面配置就一样了，唯一变化是在setOption参数对象中多了一个地图的配置对象。进行注册地图，方法接收两个参数，
在vue中使用echarts如何把data中的数据显示到tooltip中
m0_50441807的博客
05-26 1458
假设data中有以下的数据： data() { return { barData: [{ aaa: 12, bbb: 23, ccc: 18 }, { aaa: 32, bbb: 43, ccc: 68 }, { aaa: 17, bbb: 43, ccc: 15 }, { aaa: 52, bbb: 34, ccc: 85
vue +echart data中的数据动态赋值
qq_38215042的博客
04-10 1万+
今天用vue 往echart中添加数据的时候，遇到了一个问题，就是从后台调取过来数据，怎么动态的赋值给xAxis.我今天做的是把部门动态添加到xaxis 下面是效果图 下面是打印获取到的值 下面是实现的代码 index.html <template> <div class="department"> <div id="department_role" ...
vue 结合v-chart 实现折线图
Kill_paradise的博客
11-11 1309
1. 结构： <ve-line:data="chartData":extend="chartExtend"height="500px"></ve-line> 2. 数据 chartData:{ columns:['日期','访问用户','下单用户','下单率'], rows:[ {日期:'1/1',访问用户:1393,下单用户:1093,下单率:320.32}, ...
如何在vue里使用echarts
热门推荐
takobee5411的博客
06-10 1万+
如何在vue里使用echarts
ECharts——绘制柱状图
娓娓道来
08-28 1141
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js"></sc...
前端开发之vue可视化数据图表组件（Chart.js）
m0_50207524的博客
06-01 8833
vue可视化视图插件
详解Vue中使用Echarts的两种方式
08-27
主要介绍了Vue中使用Echarts的两种方式,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue项目创建简单echarts图表
01-11
vue项目创建简单echarts图表 运行过程： 1、npm install 2、npm install echarts --save 3、npm run dev
vue-cli项目中使用echarts图表实例
10-17
在本篇文章里我们给大家分享了关于vue中使用echarts图表的实现方法，有兴趣的朋友们学习下。
在项目vue中使用echarts的操作步骤
10-14
主要介绍了在项目vue中使用echarts的操作步骤，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue.js（自定义指令）
Luo3255069063的博客
04-18 460
【代码】Vue.js（自定义指令）
vue 实现级联选择器功能
最新发布
清音的博客
04-22 466
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
vue3【实用教程】侦听器 watch，自动侦听 watchEffect()，$watch，手动停止侦听器
朝阳39的博客
04-18 1112
侦听明确指定的状态变化执行回调。
19篇 vue3进阶
hummhumm的专栏
04-20 382
10. **组件定义的分离**：通过 `defineComponent` 方法分离组件逻辑与模板。23. **事件总线 (`provide` / `inject`)**：祖先与后代组件间通信。33. **跨平台支持**：如 `Nativescript-Vue` 或 `Uni-app`。9. **动态组件和 `v-if` / `v-for`**：更灵活地使用这些指令。20. **计算属性 (`computed`)**：创建缓存的计算属性。12. **组件的 `expose` 选项**：显式指定组件公开属性。
vue3【详解】 vue3 比 vue2 快的原因
朝阳39的博客
04-19 898
vue3使用的 Proxy 在处理属性的读取和写入时，比vue2使用的defineProperty 有更好的性能（速度加倍的同时，内存还能减半！
vue项目中使用echarts实现数据映射
05-24
要在Vue项目中使用echarts图表，你需要先安装echarts库。可以通过npm或yarn来安装echarts： ```bash npm install echarts --save # 或者 yarn add echarts ``` 然后在Vue组件中引入echarts并使用它来绘制图表。...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值