在VUE项目中使用Echarts简单实现折线图、柱状图、饼图

最新推荐文章于 2024-09-06 17:08:59 发布
最新推荐文章于 2024-09-06 17:08:59 发布
阅读量4.7k 收藏 30
点赞数 5
分类专栏： Vue 页面开发 文章标签： vue.js echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41611829/article/details/125514238
版权

目录

1、首先下载echarts包

2、在main.js中全局引入echarts包，挂载到vue实例上

3、在vue单页面上使用echarts

3.1实现折线图和柱状图  在vive层

3.2实现饼图

3.3实现折线图

3.4实现多重饼图

上面的例子都在mounted挂载完成时调用 

3.5 自己平常使用的echarts写法

1、首先下载echarts包

npm i echarts --save


2、在main.js中全局引入echarts包，挂载到vue实例上

import echarts from 'echarts';
Vue.prototype.$echarts = echarts


3、在vue单页面上使用echarts

3.1实现折线图和柱状图
  在vive层

//必须设置宽和高
 <div id="main" style="width:400px;height:300px;"></div>
 获取echarts对象

getmain() {
	//获取echarts对象 
    let myChart = this.$echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      let option = {
      //表头
        title: {
          text: "ECharts 入门示例"
        },
        tooltip: {}, //提示
        legend: {
          //图例
          data: ["销量"] //对应series每一项中的name
        },
        xAxis: {
          //x轴显示内容
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {}, //y轴默认
        series: [
          //数据1  柱形
          {
            name: "销量",
            type: "bar", //类型  柱形
            data: [5, 20, 36, 10, 10, 20] //柱形的点
          },
          //数据2  折线
          {
            name: "折线",
            type: "line", //类型 折线
            smooth: true, //是否是弯曲的折现  弯弯曲曲
            itemStyle: {
              //折线样式
              /*设置折线颜色*/
              normal: {
                color: "#c4cddc"
              }
            },
            data: [5, 20, 36, 10, 10, 20] //折线的点
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      //定时器主要实现数据的变化echarts的重新渲染
      //删除数据第一项 在最后加一项 
      setInterval(function() {
        var data0 = option.series[0].data;
        option.series.map(item => {
          item.data.shift();
          item.data.push(Math.round(Math.random() * 39 + 1));
        });
        myChart.setOption(option);
      }, 2000);
    }

 

  • 3.2实现饼图

     <div id="main1" style="width:400px;height:300px;"></div>
     getmain1() {
      let myChart = this.$echarts.init(document.getElementById("main1"));
      let option = {
        backgroundColor: "#2c343c",  背景色
        title: {  //标题配置
          text: "Customized Pie",
          left: "center",
          top: 20,
          textStyle: {
            color: "#f00"
          }
        },

        tooltip: {  //提示框显示
          trigger: "item", //当trigger为’item’时只会显示该点的数据，为’axis’时显示该列下所有坐标轴所对应的数据。
          formatter: "{a} <br/>{b} : {c} ({d}%)" //系列名  数据项变量名  数据值   百分比
        },

        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0, 1]
          }
        },
        legend: {  //图例
          orient: "vertical", //纵向显示
          x: "left",
          textStyle: {
            color: "#f00"
          },
          data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
        },
        series: [  //数据
          {
            name: "访问来源",
            type: "pie",  //饼图
            radius: "55%",
            center: ["50%", "50%"],
            data: [
              { value: 335, name: "直接访问" },
              { value: 310, name: "邮件营销" },
              { value: 274, name: "联盟广告" },
              { value: 235, name: "视频广告" },
              { value: 400, name: "搜索引擎" }
            ].sort(function(a, b) {
              return a.value - b.value;
            }),  //按照value值从小到大排序
            roseType: "radius",
            label: {
              color: "rgba(255, 255, 255, 0.3)"
            },
            labelLine: {
              lineStyle: {
                color: "rgba(255, 255, 255, 0.3)"
              },
              smooth: 0.2,
              length: 10,
              length2: 20
            },
            itemStyle: {
              color: "#c23531",
              shadowBlur: 200,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            },

            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function(idx) {
              return Math.random() * 200;
            }
          }
        ]
      };
      setInterval(function() {
        var data0 = option.series[0].data.sort(function(a, b) {
          return a.value - b.value;
        });
        // { value: 335, name: "直接访问" }
        let name = data0.shift();
        data0.push({
          value: Math.round(Math.random() * 400 + 1),
          name: name.name
        });
        option.series[0].data = data0.sort(function(a, b) {
          return a.value - b.value;
        });
        myChart.setOption(option);
      }, 2000);
    },

  • 3.3实现折线图

  • <div id="main2" style="width:400px;height:300px;"></div>
    getmain2() {
      let myChart = this.$echarts.init(document.getElementById("main2"));
      let option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        legend: {},
        toolbox: { //工具栏
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        tooltip: {
          trigger: "axis" //显示当前列的所有信息
        },
        yAxis: {
          type: "value"
        },
        series: [
        //数据   五条折线数据  line 折线
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line"
          },
          {
            data: [11, 22, 33, 44, 55, 66, 77],
            type: "line"
          },
          {
            data: [111, 222, 333, 444, 555, 666, 777],
            type: "line"
          },
          {
            data: [711, 622, 533, 444, 355, 266, 177],
            type: "line"
          },
          {
            data: [611, 422, 533, 644, 755, 666, 177],
            type: "line"
          }
        ]
      };

      setInterval(function() {
        option.series.map(item => {
          item.data.shift();
          return item.data.push(parseInt(Math.random() * 1500));
        });
        myChart.setOption(option);
      }, 2000);
    },

     

  • 3.4实现多重饼图

  • <div id="main3" style="width:500px;height:500px;"></div>
      getmain3() {
      let charts = document.getElementById("main3");
      let myChart = this.$echarts.init(charts);
      let color = ["#FF8700", "#ffc300", "#00e473", "#009DFF", "#0034ff"];
      let placeHolderStyle = {
        normal: {
          // 设置扇形的阴影
          shadowBlur: 90,
          shadowColor: "rgba(255,227,42,1)",
          shadowOffsetX: -2,
          shadowOffsetY: 10,
          label: {
            show: false
          },
          labelLine: {
            show: false
          }
        }
      };
	//每一个环的数据
      let data0 = [
        {
          name: "户型图比例",
          type: "pie",
          roundCap: true,
          clockWise: true, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [155, 175],//
          itemStyle: placeHolderStyle,
          data: getData()
        },
        {
          name: "钥匙率",
          type: "pie",
          clockWise: true, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [130, 150],
          itemStyle: placeHolderStyle,
          data: getData()
        },
        {
          name: "委托率",
          type: "pie",
          clockWise: true, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [105, 125],
          itemStyle: placeHolderStyle,
          data: getData()
        },
        {
          name: "经理陪看率",
          type: "pie",
          clockWise: true, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [80, 100],
          itemStyle: placeHolderStyle,
          data: getData()
        },
        {
          name: "实勘率",
          type: "pie",
          clockWise: true, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [180, 200],
          itemStyle: placeHolderStyle,
          label: {
            normal: {
              show: false
            }
          },
          data: getData()
        }
      ];

      function getData(percent) {
        percent = Math.random() * 1;
        return [
          {
            value: percent,
            name: percent
            // itemStyle: {
            //      normal: {
            //              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //                         offset: 0,
            //                         color: '#00B2EE'
            //                     }, {
            //                         offset: 1,
            //                         color: '#00DDE6'
            //                     }])
            //     }
            // }
          },
          {
            value: 1 - percent,
            itemStyle: {
              normal: {
                color: "transparent"
              }
            }
          }
        ];
      }

      let option = {
        backgroundColor: "#0E2A43",
        color,

        tooltip: {
          trigger: "item",
          formatter: function(params, ticket, callback) {
            return params.seriesName + ": " + params.name * 100 + "%";
          }
        },
        legend: {
          top: "15%",
          left: "20%",
          itemHeight: 18,
          data: ["户型图比例", "实勘率", "委托率", "经理陪看率", "钥匙率"],
          textStyle: {
            color: "#fff",
            fontSize: "100%"
          },
          // selectedMode: true,
          orient: "vertical"
        },
        series: data0
      };
      setInterval(function() {
        let data = option.series;
        data.map(item => {
          item.data = getData();
        });
        myChart.setOption(option);
      }, 2000);
    }

    上面的例子都在mounted挂载完成时调用 

  •  mounted() {
    //条形
    this.getmain();
    //饼图
    this.getmain1();
    //折线图
    this.getmain2();
    //dingtu
    this.getmain3();
  }

    3.5 自己平常使用的echarts写法

<div class="left-top top">
             <div id="sector" style="width: 100%;
    height: 300px;
    margin: 0 auto;">
             </div>
   mounted() {
      this.getPie();
    },
methods: {
      getPie(){
         let myChart = this.$echarts.init(document.getElementById('sector'));

         let option={
          title: {
            text: '某站点用户访问来源',
            top:'5%',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            top:'15%',
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
              ],
              itemStyle:{
                normal:{
                  label:{
                    show: true,
                    formatter: '{b} : {c}'
                  },
                  labelLine :{show:true}
                }
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                }
              }
            }
          ]
        }
         option && myChart.setOption(option);
         //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
          window.addEventListener('resize',function() {myChart.resize()});
      }
}

普通小程序员
关注
专栏目录
vue+chart.js 整合 绘制折线图
11-30
vue与chart整合，绘制折线图，提供查询结果覆盖原有页面，解决重画问题
vue中折线图的的实现
weixin_45350120的博客
09-03 3284
整体的实现步骤 1.第一步： npm i v-charts echarts -S 这一步主要是引入v-chart的组件 2.第二步： vue的main.js文件中引入相关依赖 import VCharts from 'v-charts' Vue.use(VCharts) 3.第三步： 页面相关展示代码 <template> <ve-line :data="chartData" :settings="chartSettings"></ve-line> </te
Vue3+Echarts常用属性总结之折线图
最新发布
幽幽谷
09-06 2386
Vue3+Echarts常用属性总结之折线图
Vue | 使用 ECharts 绘制折线图
狂放不羁霸的博客
03-16 5002
一、安装和引入 ECharts 二、使用 ECharts 2.1 新增 div 盒子 2.2 编写画图函数 2.3 完整代码结构 三、各种小问题 3.1 函数调用问题 3.2 数据格式问题 3.3 坐标轴标签问题 3.4 间隔显示标签
带时间轴的指标监控柱状图
09-20 1363
function getData(percent) { return [{ value: percent, name: percent, }, { value: 1 - percent, label: { show: false }, labelLine: { normal: { show: false }...
在Vue中使用Echarts
祈澈菇凉
11-05 1339
前端可视化是一个前端最基本的技能，要想做的好看，还是得借助一下百度家的echarts，那要怎么在Vue中使用echarts？这个官网没有给出实例，实例基本都是在jquery里面使用，引入的例子。 Echarts官网：https://echarts.apache.org/zh/index.html 1:在项目里面安装echarts cnpm install echarts --s 2：在需...
基于Cesium+VUE完美集成展示Echarts柱状/折线/饼状图，完整demo和源代码，代码未加密/未压缩，可直接调用运行
06-13
基于Cesium+VUE完美集成展示Echarts柱状/折线/饼状图，完整demo和源代码，代码未加密/未压缩，可直接调用运行 文章描述：https://blog.csdn.net/qq_34205305/article/details/124028204 代码不易，略收小费，使用...
Springboot+mybatis+echarts实现数据可视化 折线图饼图柱状图
06-22
在这个项目中，我们将探讨如何使用Springboot、Mybatis和Echarts这三种技术来实现数据的可视化，包括折线图、饼图和柱状图。这些图表类型广泛用于数据分析、报表展示和决策支持。 首先，Springboot是基于Spring框架...
使用echarts实现立体-柱状图
07-21
效果图 https://mp.csdn.net/mp_blog/creation/editor/125918054 用echarts实现立体-柱状图ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10...
【JavaScript源代码】Vue使用Echarts实现立体柱状图.docx
12-29
- **Echarts**：是一款由百度开源的数据可视化图表库，支持多种图表类型，如柱状图、折线图、饼图等，并且可以通过简单的API调用来生成复杂的可视化效果。 #### 三、实现步骤 接下来，我们将详细讲解如何通过Vue.js...
封装echarts折线图（基于Vue3、TS）
C90283的博客
03-16 469
封装echart折线图
vue+echarts实现动态折线图的方法与注意
10-14
主要给大家介绍了关于vue+echarts实现动态折线图的方法与注意事项，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue实现折线图 可按时间查询
10-14
主要为大家详细介绍了vue实现折线图，可按时间查询，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
springboot echarts vue 柱状图
01-25
SpringBoot提供后台接口，vue作为前台，使用echarts取后台数据展示柱状图
28-Vue之ECharts-折线图
小白的博客
12-12 4773
ECharts-折线图
vue 使用echarts绘制折线图
Lyndon的专栏
08-24 9626
<template> <div> <!-- 方法一，注册echarts到vue的原型对象中，指定某个div作为echarts的画布 --> <el-row :gutter="20" style="margin-bottom: 20px;"> <el-col :span="24"> <el-card shadow="always"> .
vue初步使用echart，实现折线图
ex_xyz的博客
06-15 3135
本文主要有以下内容： 如何引入官方库 如何配置图表基础信息用于显示，包括标题，图例，图表大小等 如何添加平均线 如何添加面积显示 如何选择多折现的叠加或者堆砌
vue实现echarts中 9种 折线图图例
懒虫的博客
10-09 2724
vue实现echarts中 9种 折线图图例
vue中如何使用echarts——以折线图为例
热门推荐
weixin_61032994的博客
04-07 1万+
1.先准备一个容器 2.在mounted钩子函数中书写以下代码 let psgTimeOption = { title: { left: 'center', text: '旅客时间分布', textStyle: { color: '#fff', fontSize: 35, fontWeight: 'normal' } }, // 设置折线图的位置
基于vue 封装一个可以显示饼图折线图柱状图的echarts组件代码
04-20
没有问题，我可以帮您回答这个问题。以下是一份基于Vue封装的Echarts组件代码示例： ...通过传入不同的`option`对象，该组件可以用于显示饼图、折线图、柱状图等多种Echarts图表。希望这个代码能够对您有所帮助！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值