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

最新推荐文章于 2024-03-16 16:21:42 发布
最新推荐文章于 2024-03-16 16:21:42 发布
阅读量4.3k 收藏 26
点赞数 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()});
      }
}

普通小程序员
关注
  • 5
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue+echarts实现动态绘制图表及异步加载数据的方法
10-17
vue写的后台管理，需要将表格数据绘制成图表（折线图，柱状图），图表数据都是通过接口请求回来的。这篇文章主要介绍了vue+echarts 动态绘制图表及异步加载数据的相关知识,需要的朋友可以参考下
vue总100%占比柱状图.rar
12-14
自己写的一些基于vued的简单组件，喜欢的就拿走 总数:10000 值1：{{ this.test }} 值2：{{ this.test1 }} 值3：{{ this.test2 }} 值4：{{ this.test3 }}
Vue | 使用 ECharts 绘制折线图
狂放不羁霸的博客
03-16 1494
一、安装和引入 ECharts 二、使用 ECharts 2.1 新增 div 盒子 2.2 编写画图函数 2.3 完整代码结构 三、各种小问题 3.1 函数调用问题 3.2 数据格式问题 3.3 坐标轴标签问题 3.4 间隔显示标签
Springboot+mybatis+echarts实现数据可视化 折线图饼图柱状图
06-22
Springboot+mybatis+echarts实现数据可视化 可实现折线图饼图柱状图
springboot echarts vue 柱状图
01-25
SpringBoot提供后台接口，vue作为前台，使用echarts取后台数据展示柱状图
vue实现echarts中 9种 折线图图例
懒虫的博客
10-09 1854
vue实现echarts中 9种 折线图图例
vue实现折线图 可按时间查询
10-14
主要为大家详细介绍了vue实现折线图，可按时间查询，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
在Vue中使用Echarts
祈澈菇凉
11-05 1262
前端可视化是一个前端最基本的技能，要想做的好看，还是得借助一下百度家的echarts，那要怎么在Vue中使用echarts？这个官网没有给出实例，实例基本都是在jquery里面使用，引入的例子。 Echarts官网：https://echarts.apache.org/zh/index.html 1:在项目里面安装echarts cnpm install echarts --s 2：在需...
28-Vue之ECharts-折线图
小白的博客
12-12 3946
ECharts-折线图
带时间轴的指标监控柱状图
09-20 1251
function getData(percent) { return [{ value: percent, name: percent, }, { value: 1 - percent, label: { show: false }, labelLine: { normal: { show: false }...
vue使用Echarts画柱状图
热门推荐
懒虫的博客
09-16 1万+
VUE 柱状图
基于Cesium+VUE完美集成展示Echarts柱状/折线/饼状图，完整demo和源代码，代码未加密/未压缩，可直接调用运行
06-13
基于Cesium+VUE完美集成展示Echarts柱状/折线/饼状图，完整demo和源代码，代码未加密/未压缩，可直接调用运行 文章描述：https://blog.csdn.net/qq_34205305/article/details/124028204 代码不易，略收小费，使用...
web单页面实现多个echarts图表铺满整个div(柱状图，折线图，饼形图……)
05-19
最近针对web端实现单页面展示多个echarts图表，更直观的展示数据的变化，响应式
基于Vue+Echarts+Falsk的新冠肺炎疫情数据可视化系统（python源码）（地图、雷达图、饼图、折线图等）.zip
最新发布
03-17
基于Vue+Echarts+Falsk的新冠肺炎疫情数据可视化系统（python源码）（地图、雷达图、饼图、折线图、柱状图、数据表）.zip基于Vue+Echarts+Falsk的新冠肺炎疫情数据可视化系统（python源码）（地图、雷达图、饼图、...
CSS-滚动条样式设置
qq_41611829的博客
11-09 7213
css滚动条样式更改
vue中created、mounted、computed、methods区别与执行顺序
qq_41611829的博客
07-02 6251
computed是在DOM执行完成后立马执行（如：赋值） created执行时挂载阶段还没有开始，模版还没有渲染成html，所以无法获取元素。created钩子函数主要用来初始化数据。 mounted钩子函数一般用来向后端发起请求，拿到数据后做一些业务处理。该函数在模版渲染完成后才被调用。DOM操作一般是在mounted钩子函数中进行。 methods方法有一定的触发条件，如click等。 watch用于检测vue实例上数据的变动 默认加载的时候先computed再watch，不执行methods；等触发某
如何搭建一个vue项目(完整步骤)
qq_41611829的博客
03-19 2599
参考：https://www.cnblogs.com/yanxulan/p/8978732.html 一、安装node环境 1、下载地址为：https://nodejs.org/en/ 　　2、检查是否安装成功：如果输出版本号，说明我们安装node环境成功 　3、为了提高我们的效率，可以使用淘宝的镜像：http://npm.taobao.org/ 　　输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，....
利用vue 及java io流实现浏览器预览docx功能
qq_41611829的博客
06-29 1540
页面预览文档
将折线图和条形图放在一起 vue echarts
05-31
可以通过 ECharts 的 grid 和 xAxis、yAxis 配置实现将折线图和条形图放在一起。以下是一个示例代码： ```html <template> <div class="container"> <div class="chart-container"> <div class="line-chart" ref="lineChart"></div> <div class="bar-chart" ref="barChart"></div> </div> </div> </template> <script> import echarts from 'echarts' export default { mounted() { this.renderLineChart() this.renderBarChart() }, methods: { renderLineChart() { const lineChart = echarts.init(this.$refs.lineChart) 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' }] } lineChart.setOption(option) }, renderBarChart() { const barChart = echarts.init(this.$refs.barChart) const option = { grid: { left: '60px', top: '20px', bottom: '30px', right: '20px', containLabel: true }, xAxis: { type: 'value' }, yAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'bar' }] } barChart.setOption(option) } } } </script> <style> .container { width: 100%; height: 100%; } .chart-container { display: flex; justify-content: space-between; width: 100%; height: 100%; } .line-chart, .bar-chart { width: 50%; height: 100%; } </style> ``` 以上示例代码中，使用了 ECharts 的 grid 和 xAxis、yAxis 配置来实现将折线图和条形图放在一起。其中，通过 grid 配置设置了两个图表的间距和边距；通过 xAxis、yAxis 配置设置了折线图和条形图的坐标轴。在 mounted 钩子函数中，分别调用了 renderLineChart 和 renderBarChart 方法来渲染折线图和条形图。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值