vue项目之echarts的整理汇总（持续更新中）

最新推荐文章于 2024-05-21 20:58:30 发布
最新推荐文章于 2024-05-21 20:58:30 发布
阅读量736 收藏 17
点赞数 5
分类专栏： Vue 文章标签： echarts vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42681295/article/details/121028752
版权

vue项目之echarts的整理汇总（持续更新中）

vue项目之echarts的整理汇总（持续更新中）

echarts安装

这里不多说，npm安装和按需加载可看官网

获取 Apache ECharts

npm install echarts -S

柱状图和折线图

上手先看效果，不然无法继续进行下去，代码如下
在这里插入图片描述

<template>
  <div class="page-two">
    <baseTitleBar
      backgroundColor="#FFF"
      :leftEle="leftEle"
      :title="title"
      titleColor="#000"
    ></baseTitleBar>
    <div id="histogram"></div>
    <div id="linechart"></div>
    <van-button type="primary" @click="handleHistogramData">更新柱状图数据</van-button>
    <van-button type="info" @click="handleLinechartData">更新折线图数据</van-button>
  </div>
</template>

<script>
import baseTitleBar from '@/components/titleBar/baseTitleBar'
import * as echarts from 'echarts'

export default {
  name: 'index',
  components: {
    baseTitleBar
  },
  props: {},
  data() {
    return {
      leftEle: {
        iconName: 'iconback',
        color: '#000',
        fontSize: '.36rem',
        method: this.back
      },
      title: '页面二',
      histogram: null,
      linechart: null,
      fontSize: 0,
      dataNewWeek: [10, 40, 50, 20, 15, 25,30],
      dataLastWeek: [5, 20, 36, 10, 30, 20, 10]
    }
  },
  methods: {
    // 用于处理自适应时元素的宽高比例大小
    handleFontSize(res) {
      let clientWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth
      if (!clientWidth) return
      this.fontSize = 100 * (clientWidth / 1920)
      // console.log(this.fontSize)
      return res * this.fontSize
    },
    // 返回上一层
    back() {
      if (this.$getUserAgent() == 0) {
        try {
          u.native.onBack()
        } catch (e) {
          this.$router.go(-1)
        }
      } else {
        try {
          window.webkit.messageHandlers.onFinish.postMessage('close')
        } catch (e) {
          this.$router.go(-1)
        }
      }
    },
    // 柱状图
    initHistogram() {
      // 这里的判断是打印台 There is a chart instance already initialized on the dom！警告
      if (this.histogram != null &&  this.histogram != "" &&  this.histogram != undefined){
        this.histogram.dispose()
      }
      // 基于准备好的dom，初始化echarts实例
      this.histogram = echarts.init(document.getElementById('histogram'))
      // 绘制图表
      this.histogram.setOption({
        title: {
          text: '指标对比'
        },
        legend: {
          orient: 'vertical',
          left: 'center',
          bottom: 'bottom',
          //设置区分（哪条线属于什么）
          data: ['这周', '上周']
        },
        tooltip: {},
        xAxis: {
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {},
        series: [
          {
            name: '这周',
            type: 'bar',
            data: this.dataNewWeek,
            barGap: '0%',
            barWidth: this.handleFontSize(0.8) // 柱图宽度
            // barWidth : 20, // 柱图宽度
          },
          {
            name: '上周',
            type: 'bar',
            data: this.dataLastWeek,
            barGap: '0%',
            // barWidth : this.fontSize(20), // 柱图宽度
            barWidth: this.handleFontSize(0.8) // 柱图宽度
            // barWidth : 20, // 柱图宽度
          }
        ]
      }, true)
    },
    
    // 折线图
    initLinechart() {
      // 这里的判断是打印台 There is a chart instance already initialized on the dom！警告
      if (this.linechart != null &&  this.linechart != "" &&  this.linechart != undefined){
        this.linechart.dispose()
      }
      // 基于准备好的dom，初始化echarts实例
      this.linechart = echarts.init(document.getElementById('linechart'))
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: '指标对比'
        },
        tooltip: {
          //设置tip提示
          trigger: 'axis'
        },
        legend: {
          orient: 'vertical',
          left: 'center',
          bottom: 'bottom',
          //设置区分（哪条线属于什么）
          data: ['这周', '上周']
        },
        color: ['#8AE09F', '#FA6F53'], //设置区分（每条线是什么颜色，和 legend 一一对应）
        xAxis: {
          //设置x轴
          type: 'category',
          boundaryGap: false, //坐标轴两边不留白
          data: ['10.01', '10.02', '10.03', '10.04', '10.05', '10.06', '10.07'],
          // name: 'DATE', //X轴 name
          nameTextStyle: {
            //坐标轴名称的文字样式
            color: '#FA6F53',
            fontSize: 14,
            padding: [0, 0, 0, 10]
          },
          axisLine: {
            //坐标轴轴线相关设置。
            lineStyle: {
              color: '#FA6F53'
            }
          },
          axisLabel: {
            interval: 0
            // rotate: 50
          }
        },
        yAxis: {
          // name: '指标对比',
          nameTextStyle: {
            color: '#FA6F53',
            fontSize: 16,
            padding: [0, 0, 10, 0]
          },
          axisLine: {
            lineStyle: {
              color: '#FA6F53'
            }
          },
          type: 'value'
        },
        series: [
          {
            name: '这周',
            data: this.dataNewWeek,
            type: 'line', // 类型为折线图
            lineStyle: {
              // 线条样式 => 必须使用normal属性
              normal: {
                color: '#8AE09F'
              }
            }
          },
          {
            name: '上周',
            data: this.dataLastWeek,
            type: 'line',
            lineStyle: {
              normal: {
                color: '#FA6F53'
              }
            }
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      this.linechart.setOption(option, true)
    },
    handleHistogramData(){
      this.dataNewWeek = [20, 50, 80, 60, 75, 85, 100]
      this.dataLastWeek = [10, 40, 40, 20, 15, 25, 60]
    },
    handleLinechartData(){
      this.dataNewWeek = [20, 50, 80, 60, 75, 85, 100]
      this.dataLastWeek = [10, 40, 40, 20, 15, 25, 60]
    },
  },
  mounted() {
    let _this = this
    this.initHistogram()
    this.initLinechart()
    // 用于处理图表的浏览器窗口自适应
    window.onresize = function () {
      _this.linechart.resize()
      _this.histogram.resize() // 若有多个图表变动，可多写
      _this.handleFontSize() // 窗口变化，更新图表大小视图
    }
  },
  watch: {
    fontSize(){
      this.initHistogram()
      this.initLinechart()
    },
    // 数据更新，更新echarts图表
    dataNewWeek(){
      this.initHistogram()
      this.initLinechart()
    },
  }
}
</script>

<style  lang="scss" scoped>
#histogram {
  width: 100%;
  height: 5rem;
}
#linechart {
  width: 100%;
  height: 5rem;
}
</style>

饼状图

上手先看效果，不然无法继续进行下去，代码如下
在这里插入图片描述

<template>
  <div class="page-two">
    <baseTitleBar
      backgroundColor="#FFF"
      :leftEle="leftEle"
      :title="title"
      titleColor="#000"
    ></baseTitleBar>
    <div id="piechart"></div>
    <van-button type="primary" @click="handlePiechartData">
      更新饼状图数据
    </van-button>
  </div>
</template>

<script>
import baseTitleBar from '@/components/titleBar/baseTitleBar'
import * as echarts from 'echarts'

export default {
  name: 'index',
  components: {
    baseTitleBar
  },
  props: {},
  data() {
    return {
      leftEle: {
        iconName: 'iconback',
        color: '#000',
        fontSize: '.36rem',
        method: this.back
      },
      title: '页面三',
      piechart: null,
      fontSize: 0,
      pieData: [
        { value: 100, name: '包子' },
        { value: 200, name: '油条' },
        { value: 300, name: '豆浆' },
        { value: 100, name: '胡辣汤' },
        { value: 300, name: '八宝粥' }
      ]
    }
  },
  methods: {
    handleFontSize(res) {
      let clientWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth
      if (!clientWidth) return
      this.fontSize = 100 * (clientWidth / 1920)
      // console.log(this.fontSize)
      return res * this.fontSize
    },
    // 返回上一层
    back() {
      if (this.$getUserAgent() == 0) {
        try {
          u.native.onBack()
        } catch (e) {
          this.$router.go(-1)
        }
      } else {
        try {
          window.webkit.messageHandlers.onFinish.postMessage('close')
        } catch (e) {
          this.$router.go(-1)
        }
      }
    },
    // 饼状图
    initPiechart() {
      // 这里的判断是打印台 There is a chart instance already initialized on the dom！警告
      if (
        this.piechart != null &&
        this.piechart != '' &&
        this.piechart != undefined
      ) {
        this.piechart.dispose()
      }
      // 基于准备好的dom，初始化echarts实例
      this.piechart = echarts.init(document.getElementById('piechart'))
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: '早餐大比拼',
          subtext: '早餐分类',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'center',
          bottom:'bottom',
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: this.handleFontSize(2), // 饼状图大小
            center: ['50%', '60%'], // 饼状图上下左右的位置
            data: this.pieData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      this.piechart.setOption(option, true)
    },
    handlePiechartData() {
      this.pieData = [
        { value: 300, name: '包子' },
        { value: 100, name: '油条' },
        { value: 100, name: '豆浆' },
        { value: 200, name: '胡辣汤' },
        { value: 500, name: '八宝粥' }
      ]
    }
  },
  mounted() {
    let _this = this
    this.initPiechart()
    window.onresize = function () {
      _this.piechart.resize() // 若有多个图表变动，可多写
      _this.handleFontSize() // 窗口变化，更新图表大小视图
    }
  },
  watch: {
    fontSize() {
      this.initPiechart()
    },
    pieData() {
      this.initPiechart()
    }
  }
}
</script>

<style  lang="scss" scoped>
#piechart {
  width: 100%;
  height: 5rem;
}
</style>

柱状图和折线图的结合

上手先看效果，不然无法继续进行下去，代码如下

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

<template>
  <div class="page-two">
    <baseTitleBar
      backgroundColor="#FFF"
      :leftEle="leftEle"
      :title="title"
      titleColor="#000"
    ></baseTitleBar>
    <div id="mergecharts"></div>
    <van-button type="info" @click="handleMergechartsData">
      更新合并图数据
    </van-button>
  </div>
</template>

<script>
import baseTitleBar from '@/components/titleBar/baseTitleBar'
import * as echarts from 'echarts'

export default {
  name: 'index',
  components: {
    baseTitleBar
  },
  props: {},
  data() {
    return {
      leftEle: {
        iconName: 'iconback',
        color: '#000',
        fontSize: '.36rem',
        method: this.back
      },
      title: '页面二',
      mergecharts: null,
      fontSize: 0,
      // 合并数据图表
      totalData: [10, 40, 50, 20, 15, 25, 30],
      finishData: [5, 20, 10, 10, 10, 15, 10],
      categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    }
  },
  methods: {
    handleFontSize(res) {
      let clientWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth
      if (!clientWidth) return
      this.fontSize = 100 * (clientWidth / 1920)
      // console.log(this.fontSize)
      return res * this.fontSize
    },
    // 返回上一层
    back() {
      if (this.$getUserAgent() == 0) {
        try {
          u.native.onBack()
        } catch (e) {
          this.$router.go(-1)
        }
      } else {
        try {
          window.webkit.messageHandlers.onFinish.postMessage('close')
        } catch (e) {
          this.$router.go(-1)
        }
      }
    },
    // 合并的柱状图和折线图
    initMergecharts() {
      // 这里的判断是打印台 There is a chart instance already initialized on the dom！警告
      if (
        this.mergecharts != null &&
        this.mergecharts != '' &&
        this.mergecharts != undefined
      ) {
        this.mergecharts.dispose()
      }
      // 基于准备好的dom，初始化echarts实例
      this.mergecharts = echarts.init(document.getElementById('mergecharts'))

      let option = {
        title: {
          text: '柱状图和折线图'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#283b56'
            }
          }
        },
        legend: {
          // 图例组件的位置
          orient: 'vertical',
          left: 'center',
          bottom: 'bottom',
          // 图例标记的图形宽度和高度
          itemWidth: 10,
          itemHeight: 10
        },
        dataZoom: {
          show: false,
          start: 0,
          end: 100
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,
            data: this.categories
          }
        ],
        yAxis: [
          {
            type: 'value',
            scale: true,
            // max: 80,
            min: 0,
            boundaryGap: [0.2, 0.2]
          }
        ],
        series: [
          {
            name: '总数',
            type: 'bar',
            barGap: '-100%',
            data: this.totalData,
            color: '#3AA1FF'
          },
          {
            name: '已完成',
            type: 'bar',
            barGap: '-100%',
            data: this.finishData,
            color: '#4ECB73'
          },
          {
            name: '总数',
            type: 'line',
            data: this.totalData,
            color: '#AAD6FF'
          }
        ]
      }
      this.mergecharts.setOption(option, true)
    },
    handleMergechartsData() {
      console.log('更新图表数据')
    }
  },
  mounted() {
    let _this = this
    this.initMergecharts()
    window.onresize = function () {
      // 若有多个图表变动，可多写
      _this.mergecharts.resize()
      _this.handleFontSize() // 窗口变化，更新图表大小视图
    }
  },

  watch: {
    fontSize() {
      this.initMergecharts()
    },
    totalData() {
      this.initMergecharts()
    }
  }
}
</script>

<style  lang="scss" scoped>
#mergecharts {
  width: 100%;
  height: 5rem;
}
</style>
牛先森家的牛奶
关注
  • 5
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue_echarts_demo:vue echarts项目
04-05
vue_echart_demo 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 自定义配置 请参阅。
在 Vue 的项目中使用 echarts
XiaoHuanhu的博客
11-10 581
一、安装echarts项目依赖 npm install echarts --save //或者 npm install echarts -S 二、全局引入 安装完成后，在 main.js 中全局引入 echarts import * as echarts from 'echarts'; Vue.prototype.$echarts = echarts; 三、做个简单示例（两种方法） 1.option写在data中 <template> <div class="ech
echarts-折线图与柱状图，图形的标记，堆叠
最新发布
m0_74019046的博客
05-21 1122
如果要画一个图标就需要在series里加一个对象。data中定义图标的数据。xAxisIndex、yAxisIndex、polarIndex(radiusAxis,angleAxis等) 用来选择使用哪条坐标轴。coordinateSystem 用来选择坐标系是什么坐标系，默认是直角坐标系。id,name用来给图表一个唯一的标识，用于setOption的更新或用id获取图表。
Vue项目使用Echarts
ifmushroom的博客
09-16 482
vue项目引入Echarts图表
Vue 学习笔记11：Echarts-vue项目
Fulling的博客
04-11 1842
Vue 学习笔记11：Echarts-vue项目综合练习一、基础1. 基本使用2. 使用场景二、进阶1. 显示相关2. 动画的使用3. 交互 API 一、基础 1. 基本使用 步骤： 引入 echarts.js 文件 <script src="echarts.min.js"></script> 准备一个呈现图标的盒子 <div style="width: 600px;height: 400px;"></div> 初始化 echarts 实例对象
vue项目中使用echarts
CC酱写前端的博客
08-31 508
vue项目中使用echarts
在Vue中使用echarts的方法
08-28
在实际项目中，我们经常需要将ECharts集成到Vue项目中，以实现数据的可视化展示。因此，本文将详细介绍在Vue中使用ECharts的方法。 全局引入ECharts 首先，我们可以使用NPM安装ECharts，执行以下命令： ``` npm ...
vue 项目引入echarts 添加点击事件操作
10-14
在Vue项目中，ECharts是一个常用的可视化库，用于创建各种图表。本文将详细介绍如何在Vue项目中引入ECharts以及如何添加点击事件操作。 首先，为了全局使用ECharts，我们需要在`main.js`文件中导入ECharts库。这...
vue在使用ECharts时的异步更新和数据加载详解
08-28
当我们将 ECharts集成到 Vue 项目中时，需要处理的异步更新和数据加载问题。本文将详细介绍如何在 Vue 中使用 ECharts 实现异步更新和数据加载。 一、准备 ECharts 环境 首先，我们需要将 ECharts.js 引入到我们的...
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
10-15
然而，有时可能会遇到一个问题，即当Vue的数据模型发生变化时，ECharts图表的视图并没有随之更新。这个问题通常发生在ECharts图表被嵌入到Vue的弹框或者组件中。本文将详细介绍如何解决这个问题。 1. **问题描述**...
在项目vue中使用echarts的操作步骤
10-14
在Vue项目中集成ECharts是常见的数据可视化需求。ECharts是一个由百度开发的基于JavaScript的开源图表库，提供了丰富的图表类型，如折线图、柱状图、饼图等，适用于各种Web应用中的数据展示。以下是在Vue项目中使用...
在Vue中使用echarts的实例代码（3种图）
12-07
前言 公司的项目中需要对数据做可视化处理，高级点的D3.js目前还没接触到，因此选用了大众化的Echarts, 在vue的生态系统中已经有实现好的vue-echarts，但是使用现成的就意味着必须使用它定制好的数据结构，我也没办法对他进行一些修改。我个人也偏向于原生JS编程，因此没有采用，而是自己在vue中实现了对数据的可视化处理，先来看看效果图 以下数据已做脱敏处理 这是目前用到的三种图。 可以看到，我在图表的外部添加了标题及说明，以及右侧的选择框组件，视图可以根据选择的不同，图表进行动态切换（echarts也是数据驱动），这就是个人定制化的好处 总体数据流向 所有的数据都是动态
vue-echarts-demo
05-18
vue-echarts-demo A Vue.js project Build Setup # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report # run unit tests npm run unit # run e2e tests npm run e2e # run all tests npm test 参考文档： echarts api: echarts theme: echarts在v
10 vue项目-echarts
qq_38210427的博客
04-13 146
修改 App.vue 中的代码,将布局和样式删除删除 components/HelloWorld.vue 这个文件删除 views/About.vue 和 views/Home.vue 这两个文件修改 router/index.js 中的代码,去除路由配置和 Home 组件导入的代码。
Vue+Echarts
weixin_45866188的博客
07-14 927
Vue+Echarts
vue+echarts
A123ppleQueen的博客
12-07 838
1.安装 npm install echarts --save-dev 2.在main.js文件中引入 import * as echarts from 'echarts' Vue.prototype.$echarts = echarts 3. 新建一个.vue文件,我是在views文件夹里建了一个Two.vue <template> <div class="two"> <div id="main" style="width: 60...
echarts学习——（上）Vue+Echarts构建可视化大数据平台实战项目分享（附源码）
醉眸颜入骨
04-06 6586
前言 分享之前我们先来普及一下什么是数据可视化？数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。数据可视化通俗来说就是：数据的展示、处理和分析。目的是借助于图形化手段，清晰有效地传达与沟通信息。 那前端数据可视化又是什么呢？前端数据可视化其实就是利用前端表现层的手段，以前端手段展示、处理和分析数据。前端因为H5的到来，使前端有了质的飞跃，也使前端数据可视化的飞速发展得到了契机。H5提供的canvas就是这一契机。它是前端利用JS制作在做前端数据可视化的利器，几乎全部前端数据可视化工
echarts学习笔记(vue项目中使用)
noob9527的博客
12-27 388
echarts使用笔记，vue项目中使用echarts，echarts在vue项目中封装成组件模板使用
echarts在vue项目中的使用
qq_43483403的博客
12-23 1162
echarts在vue项目中的使用问题，以及一些图表优化问题。
vue项目中echarts 3d饼图
01-09
在Vue项目中使用echarts绘制3D饼图的方法如下： 1. 首先，安装echarts和vue-echarts依赖： ```shell npm install echarts vue-echarts ``` 2. 在Vue组件中引入echarts和vue-echarts： ```javascript import ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值