vue+echarts 几个案例

于 2024-01-15 18:41:05 发布
阅读量745 收藏 12
点赞数 10
分类专栏： Vue 文章标签： vue.js echarts 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fuhao6363/article/details/135600845
版权
本文详细介绍了如何在Vue项目中使用ECharts库创建普通柱状图、水平柱状图、饼状图、玫瑰图、折线图、散点图、雷达图以及混合图。每个图表类型都展示了其数据配置和基本样式设置。
摘要由CSDN通过智能技术生成

普通柱状图

<template>
  <!--  容器默认宽高是0 如果不设置 页面不显示-->
  <div ref="mychart" id="mychart"></div>
</template>

<script>
import * as echarts from "echarts"
import axios from 'axios'

export default {
  mounted() {
    let mychart = echarts.init(this.$refs.mychart)
    let xData = ["1","2","3","4"]
    let yData = [1,2,3,4]
    let option = {
      title:{
        text:"测试用例"
      },
      xAxis:{
        data:xData,
        type:"category" //value数据轴 category类目轴
      },
      yAxis:{},
      series:[{
        name:"测试",
        type:"bar",
        data:yData,
        markPoint:{ //set max value and min value
          data:[
            {
              type:"max",
              name:"max value"
            },
            {
              type:"min",
              name:"min value"
            }
          ]
        },
        // line of charts
        markLine:{
          data:[
            {
              type:"average"
            }
          ]
        }
      }]
    }
    // 设置图标
    mychart.setOption(option)
  }
}

</script>

<style>
#mychart {
  height: 500px;
  width: 500px;
  border:1px solid blue;
}
</style>

水平柱状图

<template>
  <!--  容器默认宽高是0 如果不设置 页面不显示-->
  <div ref="mychart" id="mychart"></div>
</template>

<script>
import * as echarts from "echarts"
import axios from 'axios'

export default {
  mounted() {
    let mychart = echarts.init(this.$refs.mychart)
    let xData = ["1","2","3","4"]
    let yData = [1,2,3,4]
    let option = {
      title:{
        text:"测试用例"
      },
      xAxis:{
        type:"value" //value数据轴 category类目轴
      },
      yAxis:{
        data:xData,
        type:"category" //value数据轴 category类目轴
      },
      series:[{
        name:"测试",
        type:"bar",
        data:yData,
        markPoint:{ //set max value and min value
          data:[
            {
              type:"max",
              name:"max value"
            },
            {
              type:"min",
              name:"min value"
            }
          ]
        },
        // line of charts
        markLine:{
          data:[
            {
              type:"average"
            }
          ]
        }
      }]
    }
    // 设置图标
    mychart.setOption(option)
  }
}

</script>

<style>
#mychart {
  height: 500px;
  width: 500px;
  border:1px solid blue;
}
</style>

饼状图

<template>
  <!--  容器默认宽高是0 如果不设置 页面不显示-->
  <div ref="mychart" id="mychart"></div>
</template>

<script>
import * as echarts from "echarts"
import axios from 'axios'

export default {
  mounted() {
    let mychart = echarts.init(this.$refs.mychart)
    // 设置数据
    let data = [
      {value:67,name:"美食"},
      {value:175,name:"数码"},
      {value:27,name:"家电"},
      {value:99,name:"游戏"}
    ]

    let option = {
      title:{
        text:"饼状图测试用例",
        left:"center"
      },
      legend:{
        left:"left",
        orient:"verical"

      },
      series:[
        {
          name:"销量统计",
          type:"pie",  // 指定为饼状图
          data:data,
          radius:["40%","70%"], //设置饼图的半径 [内半径 外半径]
          // 设置环形图的文本标签
          label:{
            show:true,
            position:"inside" // outside外侧展示 inside内侧展示
          }
        }
      ]
    }
    // 设置图标
    mychart.setOption(option)
  }
}

</script>

<style>
#mychart {
  height: 500px;
  width: 500px;
  border:1px solid blue;
}
</style>

玫瑰图

<template>
  <!--  容器默认宽高是0 如果不设置 页面不显示-->
  <div ref="mychart" id="mychart"></div>
</template>

<script>
import * as echarts from "echarts"
import axios from 'axios'

export default {
  mounted() {
    let mychart = echarts.init(this.$refs.mychart)
    // 设置数据
    let data = [
      {value:20,name:"A"},
      {value:40,name:"B"},
      {value:60,name:"C"},
      {value:80,name:"D"},
      {value:100,name:"E"},
      {value:120,name:"F"},
      {value:140,name:"G"}
    ]

    let option = {
      title:{
        text:"玫瑰图测试用例",
        left:"center"
      },
      legend:{
        left:"left",
        orient:"verical"

      },
      series:[
        {
          name:"销量统计",
          type:"pie",  // 指定为饼状图
          data:data,
          roseType: 'area'
        }
      ]
    }
    // 设置图标
    mychart.setOption(option)
  }
}

</script>

<style>
#mychart {
  height: 500px;
  width: 500px;
  border:1px solid blue;
}
</style>

折柱混合图

<template>
  <!--  容器默认宽高是0 如果不设置 页面不显示-->
  <div ref="mychart" id="mychart"></div>
</template>
<script >
import * as echarts from "echarts"


export default {
  mounted(){
    let mychart = echarts.init(this.$refs.mychart)

    let option = {
      title:{
        text:"混合图测试用例"
      },
      legend: {
        selectedMode: true,//可点击
        data: ['注册用户', '累计用户量'],
        bottom: 0
      },
      grid: {
        left: 100
      },
      xAxis: [
        {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '注册用户',
          splitLine: {//显示分割线
            show: true
          }
        },
        {
          type: 'value',
          name: '累计用户量',
          splitLine: {
            show: true
          }
        }
      ],
      series: [
        {
          name: '注册用户',
          type: 'bar',
          data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
          itemStyle: {
            color: 'rgba(132, 136, 211, 1)'
          }
        },
        {
          name: '累计用户量',
          type: 'line',
          yAxisIndex: 1,//索引从0开始
          data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
          itemStyle: {
            color: 'rgba(91, 245, 204, 1)'
          }
        }
      ]
    }
    mychart.setOption(option)

  }
}


</script>



<style >
#mychart {
  height: 500px;
  width: 500px;
  border:1px solid blue;
}
</style>

气泡图

<template>
  <div ref="mychart" id="mychart"></div>
</template>

<script>
import * as echarts from "echarts"

export default {
  mounted() {
    let mychart = echarts.init(this.$refs.mychart)
    let datalist = [
      {
        label: "苹果",
        value: 10,
      },
      {
        label: "橘子",
        value: 1,
      },
      {
        label: "西瓜",
        value: 50,
      },
      {
        label: "香蕉",
        value: 100,
      },
    ];

    let option = {
      title:{
        text:"气泡图测试用例"
      },
      xAxis:{},
      yAxis:{},
      series:{
        type:"graph", // 关系图
        data:datalist
      }
    }

    mychart.setOption(option)

  }
}


</script>

<style>
#mychart {
  height: 500px;
  width: 500px;
  border: 1px solid blue;
}
</style>

雷达图

<template>
  <div ref="mychart" id="mychart"></div>
</template>

<script>
import * as echarts from "echarts"

export default {
  mounted() {
    let mychart = echarts.init(this.$refs.mychart)
    let option = {
      title: {
        text: "雷达图测试用例"
      },
      legend: {
        data: ['Allocated Budget', 'Actual Spending']
      },
      radar: {
        // shape: 'circle',
        indicator: [
          { name: 'Sales', max: 6500 },
          { name: 'Administration', max: 16000 },
          { name: 'Information Technology', max: 30000 },
          { name: 'Customer Support', max: 38000 },
          { name: 'Development', max: 52000 },
          { name: 'Marketing', max: 25000 }
        ]
      },
      series: [{
        name: "雷达图",
        type: "radar", //指定雷达图
        data: [
          {value: [4200, 3000, 20000, 35000, 50000, 18000]},
          {value: [5000, 14000, 28000, 26000, 42000, 21000]}
        ]
      }]

    }

    mychart.setOption(option)
  }
}

</script>


<style>
#mychart {
  height: 500px;
  width: 500px;
  border: 1px solid blue;
}
</style>

折线图

<template>
  <!--  容器默认宽高是0 如果不设置 页面不显示-->
  <div ref="mychart" id="mychart"></div>
</template>

<script>
import * as echarts from "echarts"
import axios from 'axios'

export default {
  mounted() {
    let mychart = echarts.init(this.$refs.mychart)
    let xData = ["测试","测试","测试","测试"]
    let yData = [1123,3412,1234,4522]
    let option = {
      title:{
        text:"折线图测试用例"
      },
      xAxis:{
        name:"美食",
        data:xData
      },
      yAxis:{},
      series:{
        type:"line",
        data:yData
      }
    }
    // 设置图标
    mychart.setOption(option)
  }
}

</script>

<style>
#mychart {
  height: 500px;
  width: 500px;
  border:1px solid blue;
}
</style>

散点图

<template>
  <div ref="mychart" id="mychart"></div>
</template>

<script >
import * as echarts from "echarts"
export default {
  mounted() {
    let mychart = echarts.init(this.$refs.mychart)
    let option = {
      title: {
        text: "散点图测试用例"
      },
      xAxis:{},
      yAxis:{},
      series:[{
        type:"scatter",
        data: [
          [10.0, 8.04],
          [8.07, 6.95],
          [13.0, 7.58],
          [9.05, 8.81],
          [11.0, 8.33],
          [14.0, 7.66],
          [13.4, 6.81],
          [10.0, 6.33],
          [14.0, 8.96],
          [12.5, 6.82],
          [9.15, 7.2],
          [11.5, 7.2],
          [3.03, 4.23],
          [12.2, 7.83],
          [2.02, 4.47],
          [1.05, 3.33],
          [4.05, 4.96],
          [6.03, 7.24],
          [12.0, 6.26],
          [12.0, 8.84],
          [7.08, 5.82],
          [5.02, 5.68]
        ]
      }]
    }

    mychart.setOption(option)
  }
}

</script>


<style >
#mychart{
  height: 500px;
  width: 500px;
  border: 1px solid blue;
}
</style>

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

冲鸭嘟嘟可
关注
  • 10
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue中使用echarts的例子
weixin_42464106的博客
10-27 1132
经常会用到图形统计对数据进行扁平化显示，下面文章中使用echarts进行了简单的统计图形展示。一、ECharts安装安装：从npm获取：在使用的地方引用echarts。
Vue+Echarts实例
lkrdmm的博客
12-23 880
先看下最终的效果图吧。 很明显哈，是在一个父组件上，有两个子组件页面，每个子组件展示一个Echarts图。 父组件源码我就不展示了，主要是把子组件导入并且加入到components属性中，然后在对应的位置去用就可以了。 由于我把请求都写在了子组件中去调用，所以就不用去用props传递数据了（实际开发最好减少请求次数，从而起到优化的作用）。 这个是饼图子组件的代码。 <template> <div> <div id="myCharts"></div&gt
vue使用echarts示例
lingxun123456的博客
05-25 386
<template> <div> <div class="app-container" style="position: absolute;top: 0px;"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px"> <el-form-i...
在Vue中使用Echarts实例图的方法实例
10-14
主要给大家介绍了关于如何在Vue中使用Echarts实例图的相关资料，文中介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在Vue中使用echarts的实例代码（3种图）
12-07
前言 公司的项目中需要对数据做可视化处理，高级点的D3.js目前还没接触到，因此选用了大众化的Echarts, 在vue的生态系统中已经有实现好的vue-echarts，但是使用现成的就意味着必须使用它定制好的数据结构，我也没办法对他进行一些修改。我个人也偏向于原生JS编程，因此没有采用，而是自己在vue中实现了对数据的可视化处理，先来看看效果图 以下数据已做脱敏处理 这是目前用到的三种图。 可以看到，我在图表的外部添加了标题及说明，以及右侧的选择框组件，视图可以根据选择的不同，图表进行动态切换（echarts也是数据驱动），这就是个人定制化的好处 总体数据流向 所有的数据都是动态
基于Vue+ECharts+Element UI构建的新冠肺炎疫情数据大屏-源码
10-02
项目的源码包含以下几个关键部分： 1. **组件（Components）**：Vue.js的应用通常由多个组件构成，每个组件负责一部分视图和逻辑。在这个项目中，可能有专门的组件用于显示疫情统计数据，地图，时间轴等。 2. **...
VUE echarts中国地图带下钻带返回带数据返回.rar
08-31
在这个案例中，从省级地图开始，当用户点击某个省份时，地图会细化展示该省内的城市，同时显示相关数据。这种交互设计有助于用户更好地理解复杂的数据分布。 Echarts 提供了地图图表类型，支持各种地理信息的展示，...
Vue全家桶+ElementUI后台管理项目模板.zip
05-09
在描述中提到的几个关键点： 1. **Axios的二次封装**：Axios 是一个基于Promise的HTTP库，可以在浏览器和node.js中使用。在项目中进行二次封装，通常是为了更好地适应项目需求，例如添加全局配置、拦截器、错误处理...
Echarts-websocket案例-master.zip
03-30
通过这个案例，开发者可以深入理解ECharts与WebSocket结合的实时数据展示技术，提高在实际项目中的应用能力。对于希望提升Web交互体验、实现数据实时同步的开发者来说，这是一个很好的学习资源。
Python+Vue3+ElementPlus+FastAPI 实现学生选课系统源码.zip
07-06
项目中的文件结构可能包括以下几个部分： 1. `main.py`：FastAPI的主入口文件，定义路由和API端点。 2. `models.py`：定义数据模型，可能包含学生、课程、选课关系等类。 3. `schemas.py`：定义Pydantic模型，用于...
Echart报表实现的Demo案例
05-31
Echart报表实现的Demo案例，看懂了其他都会了。 使用方法详解参考： https://blog.csdn.net/qq_36410795/article/details/80520786
vue3使用ECharts简单例子
Wancc123的博客
04-22 1933
示例单个组件内使用：（需要全局注册的根据es6写法自行引入全局） 版本： "echarts": "^5.2.0", <template> <!-- h5页面显示 --> <div id="echart-box"></div> </template> <script> // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。 import * as echarts from 'echarts/cor
Vue+ECharts的小示例
Uluoyu的博客
06-04 1129
Vue+ECharts做数据可视化 1. Vue Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 我使用的Vue版本是3.11.0。 2.ECharts https://echarts.apache.org/examples/zh/index.html ECharts的所有示
vue常用的Echarts实例
m0_56260119的博客
02-17 1034
此文章来源vue 常用的 Echarts 示例_秦浩铖-CSDN博客 echarts配置项官网：Documentation - Apache ECharts 多条柱形图 option = { animation: false, title: { text: '本周主煤流系统启动平均时长', textAlign: 'left', x: 'center', ...
vue 常用的 Echarts 示例
大家好，我是 ed.
10-09 2170
vue 常用的 Echarts 示例 为啥要整理这一篇博文呢？其实最近做大屏做的恶心了，好多echarts图表，样式花里胡哨，调样式太费劲了，然后把做过的拿下来备份一下，需要的话直接粘贴稍作修改就可以了。 echarts配置项官网：https://echarts.apache.org/zh/option.html#title 多条柱形图 option = { animation: false, title: { text: '本周主煤流
vue中使用echart图表
一个天秤座的程序猿????
01-22 753
1、安装echarts依赖 //方法一 npm install echarts -S //方法二 或者使用淘宝镜像安装 npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install echarts -S 2、创建图表全局引入 // 引入echarts main.js import echarts ...
Vue中使用echarts案例
heerey525
07-11 1185
需要注意的点： 本案例采用按需引入； echarts所挂载的DOM必须设置宽高； 本案例包含常用的折线图、柱状图（横向、竖向）、饼图、动态创建多个图表； echarts安装 npm install echarts echarts配置属性 echarts官方案例 echarts社区资源，有很多好看的例子 官方案例中选中完整代码-按需引入，即可获得按需引入的模块 <template> <div> <!-- 折线图 --> <div ref=".
Vue整合Echarts实例
Hello World
06-18 565
Vue整合Echarts实例 引入Echarts模块： cnpm install echarts --save 在src目录下，main.js文件中使用Echarts模块： import Vue from 'vue'; import echarts from 'echarts'; Vue.prototype.$echarts = echarts; 路由中写入（index.js）： import Echarts from "@/components/Echarts"; { path: '/Echart
vue引入echarts示例
WuqibuHuan的博客
03-10 394
** 首先，第一步下载Echarts。 ** 可以使用淘宝镜像下载 更快哦！~ npm 下载： npm install --registry=https://registry.npm.taobao.org 下载淘宝镜像： npm install -g cnpm --registry=https://registry.npm.taobao.org 使用cnpm（淘宝镜像）下载echarts： cnpm install echarts ** 第二步，引入echarts。 ** 1. 在main.j
vue + echarts
最新发布
08-19
Vue和Echarts是两个独立的技术，可用于创建交互式的数据可视化应用程序。 Vue是一个流行的JavaScript框架，用于构建用户界面。它允许开发人员通过组件化的方式构建应用程序，并提供了响应式的数据绑定和组件间通信...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

冲鸭嘟嘟可

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值