vue中使用echart（图表）

最新推荐文章于 2024-09-23 02:31:39 发布
最新推荐文章于 2024-09-23 02:31:39 发布
阅读量1.3k 收藏 2
点赞数 2
分类专栏： 前端 文章标签： vue.js echarts javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44953928/article/details/125124953
版权

文章目录

vue安装echarts

npm i echarts -S

引入echarts：

import * as echarts from 'echarts'

Echarts官网：https://echarts.apache.org/zh/index.html

Echarts使用手册：https://echarts.apache.org/handbook/zh/get-started/

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

折线图、柱状图、饼图

<template>
    <div>
        <el-row>
            <el-col :span="12">
                <div id="main" style="width: 500px; height: 400px"></div>
            </el-col>
            
            <el-col :span="12">
                <div id="pie" style="width: 500px; height: 400px"></div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import * as echarts from 'echarts'

    export default {
        name: "HOme.vue",
        data(){
            return{

            }
        },
        mounted() {//页面元素渲染之后在触发
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [150, 230, 224, 218, 135, 147, 260],
                        type: 'line'
                    },
                    {
                        data: [150, 230, 224, 218, 135, 147, 260],
                        type: 'bar'
                    },
                ]
            };
            myChart.setOption(option);


            //饼图
            var pieOption = {
                title: {
                    text: 'Referer of a Website',
                    subtext: 'Fake Data',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            { value: 1048, name: 'Search Engine' },
                            { value: 735, name: 'Direct' },
                            { value: 580, name: 'Email' },
                            { value: 484, name: 'Union Ads' },
                            { value: 300, name: 'Video Ads' }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            var pieDom = document.getElementById('pie');
            var pieChart = echarts.init(pieDom);
            pieChart.setOption(pieOption);
        }
    }
</script>

<style scoped>

</style>

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

绑定数据

<script>
    import * as echarts from 'echarts'

    export default {
        name: "HOme.vue",
        data(){
            return{

            }
        },
        mounted() {//页面元素渲染之后在触发
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option = {
                title: {
                    text: '各季度会员趋势图',
                    subtext: '趋势图',
                    left: 'center'
                },
                xAxis: {
                    type: 'category',
                    data: ["第一季度","第二季度","第三季度","第四季度"]
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [],
                        type: 'line'
                    },
                    {
                        data: [],
                        type: 'bar'
                    },
                ]
            };
            this.request.get("/echarts/members").then(res =>{
                //天空
                //option.yAxis.data=res.x
                option.series[0].data=res.data
                option.series[1].data=res.data
                //数据准备完毕之后在
                myChart.setOption(option);

            })



            //饼图
            var pieOption = {
                title: {
                    text: '各季度会员趋势图',
                    subtext: '比例',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        //name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        label:{            //饼图图形上的文本标签
                            normal:{
                                show:true,
                                position:'inner', //标签的位置
                                textStyle : {
                                    fontWeight : 300 ,
                                    fontSize : 14,    //文字的字体大小
                                    color: "#fff"
                                },
                                formatter:'{d}%'
                            }
                        },
                        //填空
                        data: [
                            // { value: 1048, name: 'Search Engine' },
                            // { value: 735, name: 'Direct' },
                            // { value: 580, name: 'Email' },
                            // { value: 484, name: 'Union Ads' },
                            // { value: 300, name: 'Video Ads' }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            var pieDom = document.getElementById('pie');
            var pieChart = echarts.init(pieDom);
            this.request.get("/echarts/members").then(res => {

                pieOption.series[0].data = [
                    {name: "第一季度", value: res.data[0]},
                    {name: "第二季度", value: res.data[1]},
                    {name: "第三季度", value: res.data[2]},
                    {name: "第四季度", value: res.data[3]},
                ]
                pieChart.setOption(pieOption)
            })
        }
    }
</script>
  • 后端
import cn.hutool.core.collection.CollUtil;
import cn.hutool.core.date.DateUtil;
import cn.hutool.core.date.Quarter;

import com.xiao.common.Result;
import com.xiao.entity.User;
import com.xiao.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@RestController
@RequestMapping("/echarts")
public class EchartsController {
    @Autowired
    private IUserService userService;

    @GetMapping("/example")
    public Result get() {
        Map<String, Object> map = new HashMap<>();
        map.put("x", CollUtil.newArrayList("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"));
        map.put("y", CollUtil.newArrayList(150, 230, 224, 218, 135, 147, 260));
        return Result.success(map);
    }

    @GetMapping("/members")
    public Result members() {
        List<User> list = userService.list();
        int q1 = 0; // 第一季度
        int q2 = 0; // 第二季度
        int q3 = 0; // 第三季度
        int q4 = 0; // 第四季度
        for (User user : list) {
            Date createTime = user.getCreateTime();
            Quarter quarter = DateUtil.quarterEnum(createTime);
            switch (quarter) {
                case Q1: q1 += 1; break;
                case Q2: q2 += 1; break;
                case Q3: q3 += 1; break;
                case Q4: q4 += 1; break;
                default: break;
            }
        }
        return Result.success(CollUtil.newArrayList(q1, q2, q3, q4));
    }
}

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

头部标签设计

在这里插入图片描述

<template>
    <div>
        <el-row :gutter="10" style="margin-bottom: 40px">
            <el-col :span="6">
                <el-card style="color: #409EFF">
                    <div><i class="el-icon-user-solid" />用户总数</div>
                    <div style="padding: 10px 0; text-align: center; font-weight: bold">
                        100
                    </div>
                </el-card>
            </el-col>

            <el-col :span="6">
                <el-card style="color: #F56C6C">
                    <div><i class="el-icon-money" />销售总量</div>
                    <div style="padding: 10px 0; text-align: center; font-weight: bold">
                        ￥1000000
                    </div>
                </el-card>
            </el-col>

            <el-col :span="6">
                <el-card style="color: #E6A23C">
                    <div><i class="el-icon-bank-card" />收获总额</div>
                    <div style="padding: 10px 0; text-align: center; font-weight: bold">
                        100
                    </div>
                </el-card>
            </el-col>

            <el-col :span="6">
                <el-card style="color: #67C23A">
                    <div><i class="el-icon-s-shop" />门店总数</div>
                    <div style="padding: 10px 0; text-align: center; font-weight: bold">
                        100
                    </div>
                </el-card>
            </el-col>

        </el-row>



        <el-row>
            <el-col :span="12">
                <div id="main" style="width: 500px; height: 400px"></div>
            </el-col>
            <el-col :span="12">
                <div id="pie" style="width: 500px; height: 400px"></div>
            </el-col>
        </el-row>
    </div>

</template>

图表样式

//页面元素渲染之后在触发
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option = {
                title: {
                    text: '各季度会员趋势图',
                    subtext: '趋势图',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                xAxis: {
                    type: 'category',
                    data: ["第一季度","第二季度","第三季度","第四季度"]
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: "星巴克",
                        data: [],
                        type: 'bar'
                    },
                    {
                        name: "星巴克",
                        data: [],
                        type: 'line'
                    },

                    {
                        name: "瑞幸",
                        data: [],
                        type: 'bar'
                    },
                    {
                        name: "瑞幸",
                        data: [],
                        type: 'line'
                    },
                ]
            };
            this.request.get("/echarts/members").then(res =>{
                //天空
                //option.yAxis.data=res.x
                option.series[0].data=res.data
                option.series[1].data=res.data
                option.series[2].data=[4,3,2,3]
                option.series[3].data=[4,3,2,3]
                //数据准备完毕之后在
                myChart.setOption(option);

            })

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

xiao52x
关注
专栏目录
vue中使用Echarts
devin_csdn的博客
01-18 621
前几天我们做好了一个权限管理的平台，今天我们在这个平台里练习vue2如何使用echarts。 如图这是echarts中的一个典型的关系图，每个圆圈都是一个节点，每两个节点相连就形成了这样一个关系网。 如何引入echarts呢，最好就是去官网查看，它会给我们示例可以选择按需引入方式。首先要下载 npm i echarts -S , 然后根据文档一步步操作就好。 需要注意的是，官网这里有关option里的数据是通过外部链接请求过来的，它使用jQuery的Ajax请求，但是我们使用的是vue，如果直..
Vue使用Echarts图表
李木子的博客
04-24 543
【代码】Vue使用Echarts图表。
vue+echart图表自适应屏幕大小、点击侧边栏展开收缩图表自适应大小resize
幼儿园园长
07-03 6864
开发中用到了echart图表，需要图表自适应大小resize,一开始使用的方法是： window.onresize = function () { this.myChart.resize(); }; 但是又遇到一个问题，点击侧边栏的展开收起的时候，图表的大小没有自适应（因为窗口的大小没有变化） 这里参考vue+element+admin的框架写的自适应 一、index.vue的文件 引入chart图表`` 这里是数据 chartData: { title: {
vue Echart使用
最新发布
m0_51492817的博客
09-23 393
echarts里面的数据都是数组，如何把name，num的属性值全部放到数组里面。这个盒子通常来说就是我们熟悉的 div ，这个 div 决定了图表显示在哪里。在这个步骤中, 需要指明图表最终显示在哪里的DOM元素。给盒子起名字是建议使用id选择器。
Vue 中使用 ECharts
BradenHan的专栏
01-21 1015
通过以上步骤，我们已经学会了如何在Vue中使用ECharts，并实现数据的动态更新。除此之外，ECharts还可以用于制作多种类型的图表，如折线图、饼图、雷达图等。希望这篇教程能够帮助你更好的了解ECharts的使用方法。
vue中使用echarts
weixin_43180359的博客
01-14 3万+
vue中优雅的使用echarts ​ 在前端工作中，数据可视化用得最多的，可能就是图表了。在众多的图表插件中，echarts以其良好的性能和完善的API，图表的多样性和功能的完整性，被广大开发者认可，成为了前端图表使用最多的工具。本篇文章主要就是讲下echarts在vue中的使用。 第一步，npm 安装 ECharts，可以使用如下命令通过 npm 安装 ECharts npm install ......
Vue中使用Echart图表插件之圆环套圈
流星宇
11-04 1690
Echart是一个很好的图表绘制插件，里面有各种各样的图表供我们选择，最近用echart做图表比较多，在接到一个在圆环里面套一个圈的需求时，刚开始我是真的无从下手，毕竟自己用echart的时间也不长，直接看echart官网也看不出个所以然来，最后抱着试一试的态度玩玩看，最后玩出了。 效果图如下： 主要注意的点： 1、创建的画1、创建的画布必须给定大小，不然无法显示，即.chart-...
vue之将echart封装为组件
08-27
本文主要介绍了如何将Echarts封装为组件在Vue项目中使用，通过以雷达图为案例，一步步讲解如何将Echarts封装为能重复调用的组件。 一、安装Echarts 在使用Echarts之前，需要先安装Echarts。在项目根目录下，输入...
vue中使用echart绘制柱状图、折现图、饼状图
upStar1的博客
05-19 4408
echarts有几个主要的字段，title、legend、xAxis、yAxis、tooltip、series。 title 图表的标题 legend 用来标志图表数据，data字段的数组需要对应每个柱条的名称，鼠标hover到最顶部的legend标志，可以标志对应的图，点击legend标志会隐藏对应的图。 xAxis 配置x轴数据、样式、名称 yAxis 配置y轴数据、样式、名称 tooltip 鼠标放到图上展示的数据样式，trigger: 'axis' (有axis/item...
vue实现百度echart地图省市级别点击下钻显示效果
03-28
在Vue项目中使用ECharts，我们通常会借助`vue-echarts`这个封装好的库。首先通过npm安装： ```bash npm install echarts vue-echarts --save ``` **2. 引入ECharts组件** 在Vue的`main.js`或相应组件的`script`...
vue中使用echart并在echart中添加警戒线
Alisane的博客
12-22 1142
vue中使用echart并在echart中添加警戒线，通过配置visualMap和series.markLine实现警戒线效果 this.myChart1 = this.$echarts.init(document.getElementById('myChart1')) this.option1 = { title: { text: '温度趋势图', textStyle: { color: '.
vue使用echarts图表
婷er的博客
04-02 250
1、安装echarts依赖 npm install echarts -S 2、在main.js全局引入 import echarts from 'echarts' Vue.prototype.$echarts = echarts 3、进入echarts官网，找到你想要图表 4、在vue的template中写入一个div放图表 <div id="myChart" :style="{wid...
vuejs中使用echart图表
weixin_34362991的博客
07-13 231
首先安装echart npm i echarts -S 加下来以使用这个图表为例 在vue组件中像这样使用： &lt;template&gt; &lt;div :class="className" :id="id" :style="{height:height,width:width}" ref="myEchart"&gt; &lt;/div&gt; &lt;/te
在vue中使用echarts
热门推荐
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
03-04 6万+
1、安装
vue echart的使用
Gary Leong
02-11 536
获取ECharts 你可以通过以下几种方式获取 ECharts。 从 Apache ECharts (incubating) 官网下载界面 获取官方源码包后构建。 在 ECharts 的 GitHub 获取。 通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用echarts 通过 jsDelivr 等 CDN 引入 引入E...
Vue中使用Echart
weixin_45568072的博客
09-23 228
Vue中使用Echart 1. 安装echarts依赖 npm install echarts --save 2.在main.js中全局中引用 import echarts from 'echarts' Vue.prototype.$echarts = echarts 3.在需要图表的地方设置宽、高 <div ref="chart" style="width:100%;height:376px"></div> 4.外图表的数据一般是从后台动态传过来的，则可将option放在
在vue中使用Echarts绘制图表
weixin_45525630的博客
08-12 747
在脚手架的依赖选项里面虚选择安装依赖，运行依赖 搜索echarts找到对应依赖并安装 项目中导入Echarts并且根据官方文档添加Echarts的相关结构 如果导入了相关结构发现报错无显示等情况的话先卸载echarts依赖，安装指定的低版本的echarts试试看成功如下: ...
在vue中使用Echart图表。小白篇
qq_43153895的博客
08-25 2011
最近发现公司使用echart绘制图表特别多，作为小白的我一开始并不会，后来通过学习大佬的代码，渐渐学会了基本的使用，在这里仅向新手小白分享一下，作为入门。大佬勿喷，有错误的地方还请指正。废话不多说直接开始上代码。 1.首先我们要知道ehcart是基于canvas画布的。至于没有canvas基础的，可以先上网查查他是干啥的，简单来说就是HTML中的一种绘图工具。至于echart能绘什么图，可以直接百度echart去官网查看，我常用的就是绘折线图，柱状图，饼状图等等。 2.首先在vue项目中引入echart。在
Vue中使用EChart实现雷达图的代码教程
- 在Vue组件中使用ECharts实现雷达图，首先需要在`<template>`标签内提供一个`<div>`容器，然后在`<script>`标签内引入ECharts，使用`Vue.prototype.$echarts`注册ECharts实例。 - 在Vue组件的`mounted`钩子函数中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值