Echarts图表使用

最新推荐文章于 2024-05-28 11:11:34 发布
最新推荐文章于 2024-05-28 11:11:34 发布
阅读量982 收藏 1
点赞数 1
分类专栏： javascript 文章标签： echarts javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuanchun05/article/details/126550429
版权

Echarts图表

1, Echarts是图表组件

官网: https://echarts.apache.org

2, 入门

2.1, 引入js包

<script src="js/echarts.min.js"></script>

2.2, 准备一个有宽和高的div, 记得设置一个id值

<body>
    <div id="main" style="width: 1400px;height:400px;"></div>
</body>

2.3, 初始化echarts

var myChart = echarts.init(document.getElementById('main'));

2.4, 到官方示例里复制一个option, 并调用echarts实例的setOption()方法,显示图表

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
        }
    ]
};

2.5, 配置数据并显示图表

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

结果如下图:

在这里插入图片描述

3, 修改data属性, 显示不同柱状图和数据

option = {
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [-20, -25, -15, -8, 10, 20, 26, 35, 30, 20, 10, -10],
      type: 'bar',
      label: {
        show: true
      }
    }
  ]
};

在这里插入图片描述

4, 显示标签文字label

图表上的文字叫标签

option = {
  xAxis: {
    type: 'category',
    data: ['语文', '数学', '英语', '物理', '化学', '生物', '体育']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '降雨量',
      data: [90, 110, 130, 40, 100, 89, 76],
      type: 'bar',
      label: {
        show: true
      }
    }
  ]
};

在这里插入图片描述

6,显示标题title

下面的代码中left表示位置,有3种写法

left=‘left’ 表示左侧 (left: 左侧, center:中间, right: 右侧)

left=‘30’ 表示距离左侧30像素

left=‘5-%’ 表示距离左侧50%

option = {
  title: {
    text: '全年温度变化',
    left: 'center'
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [-20, -25, -15, -8, 10, 20, 26, 35, 30, 20, 10, -10],
      type: 'bar',
      label: {
        show: true
      }
    }
  ]
};

在这里插入图片描述

7,提示工具tooltip

option = {
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  },
  yAxis: {
    type: 'value'
  },
  tooltip: {
    formatter: '{b} {c}°'
  },
  series: [
    {
      data: [-20, -25, -15, -8, 10, 20, 26, 35, 30, 20, 10, -10],
      type: 'bar',
      label: {
        show: true
      }
    }
  ]
};

在这里插入图片描述

8,横向纵向切换

xAxis: 表示横轴 yAxis: 表示纵轴

category: 表示类目型, value: 表示数值型

将xAxis和yAxis互换位置即可达到横纵切换

option = {
  title: {
    text: '全年温度变化',
    left: 'center'
  },
  yAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  },
  xAxis: {
    type: 'value'
  },
  series: [
    {
      data: [-20, -25, -15, -8, 10, 20, 26, 35, 30, 20, 10, -10],
      type: 'bar',
      label: {
        show: true
      }
    }
  ]
};

在这里插入图片描述

9, 显示双图表series

series(系列)是一个数组, 每一个元素都是一个图表

option = {
  xAxis: {
    type: 'category',
    data: ['一季度', '二季度', '三季度', '四季度']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '降雨量',
      data: [100, 200, 150, 50],
      type: 'bar'
    },
     {
      name: '蒸发量',
      data: [20, 50, 120, 10],
      type: 'bar'
    }
  ]
};

在这里插入图片描述

10, 双图表切换legend

必须给图表系列设置name属性

option = {
  legend:{},
  xAxis: {
    type: 'category',
    data: ['一季度', '二季度', '三季度', '四季度']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '降雨量',
      data: [100, 200, 150, 50],
      type: 'bar'
    },
     {
      name: '蒸发量',
      data: [20, 50, 120, 10],
      type: 'bar'
    }
  ]
};

在这里插入图片描述

11, 横轴标签显示全部文字并旋转角度

option = {
  grid: {
    bottom: 90
  },
  xAxis: {
    type: 'category',
    data: ['张飞', '关羽', '刘备', '诸葛亮', '孙权', '赵云', '周瑜', '黄忠', '魏延', '马谡', '张角', '孙尚香', '曹操', '关平', '司马懿'],
    axisLabel: {
        //显示全部标签
      interval: 0,
        //旋转45度
      rotate: 45
    }
  },
  yAxis: {
    type: 'value'
  },
  tooltip: {
    formatter: '{b} {c}°'
  },
  series: [
    {
      data: [100,99,98,50,60,70,80,90,100,88,66,45,32, 88,99],
      type: 'bar',
      label: {
        show: true
      }
    }
  ]
};

在这里插入图片描述

12, 双纵轴yAxis

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: [
    {
      type: 'value'
    },
    {
      type: 'value',
      position: 'right',
      alignTicks: true,
    }
  ],
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    },
    {
      data: [120, 210, 214, 118, 235, 247, 160],
      type: 'line',
      yAxisIndex: 1   //使用索引为1的纵轴
    }
  ]
};

在这里插入图片描述

13, 显示饼图百分比数

用formatter自定义显示格式

option = {
  title: {
    text: '各年龄人数',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '人数',
      type: 'pie',
      radius: '50%',
      label: {
        formatter: '{b} {d}%'
      },
      data: [
        { value: 1048, name: '0-14岁' },
        { value: 735, name: '15-24岁' },
        { value: 580, name: '25-40岁' },
        { value: 484, name: '41-65岁' },
        { value: 300, name: '66-100岁' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

在这里插入图片描述

14, 显示工具箱toolbox

toolbox: {
  show: true,
  feature: {
    dataZoom: {
      yAxisIndex: 'none'
    },
    dataView: { readOnly: false },
    magicType: { type: ['line', 'bar'] },
    restore: {},
    saveAsImage: {}
  }
}

在这里插入图片描述

15, 显示标注与标线

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        ]
      },
      markLine: {
        data: [{ type: 'average', name: 'Avg' }]
      }
    }
  ]
};

在这里插入图片描述

16, 实战1-查询每年|月旅游人数

(1),先编写SQL语句

-- 查询每年旅游人数
select year(t.tour_date) date,count(*) count
from tour t
group by year(t.tour_date)
order by date

-- 查询指定年,例如2021 每月旅游人数
select month(t.tour_date) date,count(*) count
from tour t
where year(t.tour_date) = 2021
group by month(t.tour_date)
order by date

(2), 在echarts官网里设计一个静态页面

option = {
  title: {
    text: '每年/月旅游人数'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: ['2017', '2018', '2019', '2020', '2021', '2022']
  },
  series: [
    {
      name: '2011',
      type: 'bar',
      data: [18203, 23489, 29034, 4970, 31744, 30230]
    }
  ]
};

在这里插入图片描述

(3), 在项目的页面里显示这个柱状图

//初始化图表
var myChart = echarts.init(document.getElementById('main'));

//将上面的option复制到个位置

//配置图表
myChart.setOption(option);

(4), 写一个query方法, 编写ajax查询数据

function query1(){
    var year = $("#date1").val();
    $.ajax({
        type: "get",
        url: "/tour/statisticsYearOrMonth",
        data: {"year": year},
        dataType: "json",
        async: true,
        cache: false,
        beforeSend: function(){layer.load();},
        success: function(result){
            
        },
        error: function(){layer.alert("请求失败");},
        complete: function(){layer.closeAll("loading");}
    });
}
//调用一次
query1();

(5), 做一个封装类, 封装年或者月和旅游人数的类

@Data
public class TourCount {
    private String date;
    private Long count;
}

(6), 编写controller代码

@GetMapping("/tour/statisticsYearOrMonth")
@ResponseBody
public Map<String, Object> statisticsYearOrMonth(String year){
    List<TourCount> list = null;
    //如果有年,则查询月份旅游人数
    if (year != null && !"".equals(year)) {
        List<TourCount> lsList = tourService.queryStatisticsMonth(year);
        //给月份后面添加'月'这个字
        list = lsList.stream().peek(p->p.setDate(p.getDate()+"月")).collect(Collectors.toList());
    } else {
        //如果没有年,则查询每年旅游人数
        list = tourService.queryStatisticsYear();
    }
    //从list里分别获取date和count装到两个独立的list里
    List<String> dateList = new ArrayList<>();
    List<Long> countList = new ArrayList<>();
    for (TourCount t : list) {
        dateList.add(t.getDate());
        countList.add(t.getCount());
    }
    //将两个list封装到map里,传给页面
    Map<String, Object> map = new HashMap<>();
    map.put("dateList", dateList);
    map.put("countList", countList);
    return map;
}

(7), 完善页面js代码

//将静态数据改为动态显示
function query1(){
    var year = $("#date1").val();
    $.ajax({
        type: "get",
        url: "/tour/statisticsYearOrMonth",
        data: {"year":year},
        dataType: "json",
        async: true,
        cache: false,
        beforeSend: function(){layer.load();},
        success: function(result){
            option.yAxis.data=result.dateList;
            option.series[0].data = result.countList;
            //根据option生成图表
            myChart.setOption(option);
        },
        error: function(){layer.alert("请求失败");},
        complete: function(){layer.closeAll("loading");}
    });
}
//页面加载后先运行一次
query1();

结果
在这里插入图片描述

和
在这里插入图片描述

17, 实战2-每年|月男女旅游人数对比

(1), 先编写SQL语句

-- 每年 男 女 旅游人数
select year(t.tour_date) as date,
count(case when t.sex=1 then '男' end) as mancount,
count(case when t.sex=0 then '女' end) as womencount
from tour t
group by year(t.tour_date)
order by date

-- 指定年,  每月 男 女 旅游人数
select month(t.tour_date) as date,
count(case when t.sex=1 then '男' end) as mancount,
count(case when t.sex=0 then '女' end) as womencount
from tour t
where year(t.tour_date)='2021'
group by month(t.tour_date)
order by date

(2), 设计静态页面

option = {
  title: {
    text: '查询每年|月男女旅游人数对比'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: [
    {
      name: '男',
      type: 'value',
      axisLine: {show: true}
    },
     {
       name: '女',
      type: 'value',
      alignTicks: true,
      axisLine: {show: true}
    }
  ],
  legend: {},
  series: [
    {
      name: '男',
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true,
      label: {show: true}
    },
    {
      name: '女',
      data: [220, 332, 401, 534, 790, 830, 1920],
      type: 'line',
      smooth: true,
      yAxisIndex: 1,
       label: {show: true}
    }
  ]
};

在这里插入图片描述

(3), 封装一个新的类来接值

@Data
public class TourSexCount {
    /**
     * 年 或者 月
     */
    private String date;
    /**
     * 男 旅游人数
     */
    private Long mancount;
    /**
     * 女 旅游人数
     */
    private Long womencount;
}

(4), controller和service写法

@GetMapping("/tour/statisticsManOrWoman")
@ResponseBody
public Map<String, Object> statisticsManOrWoman(String year){
    List<TourSexCount> list = null;
    if (year != null && !"".equals(year)) {
        List<TourSexCount> list2 = tourService.queryStatisticsManOrWomanOfMonth(year);
        list = list2.stream().peek(t -> t.setDate(t.getDate()+"月")).collect(Collectors.toList());
    } else {
        list = tourService.queryStatisticsManOrWoman();
    }
    //封装页面需要的数据结构
    List<String> dateList = new ArrayList<>();
    List<Long> manList = new ArrayList<>();
    List<Long> womanList = new ArrayList<>();
    for (TourSexCount t : list) {
        dateList.add(t.getDate());
        manList.add(t.getMancount());
        womanList.add(t.getWomencount());
    }
    //将3个list封装到map里,传给页面
    Map<String, Object> map = new HashMap<>();
    map.put("dateList", dateList);
    map.put("manList", manList);
    map.put("womanList", womanList);
    return map;
}

(4), 页面js写法

function query2(){
    var year = $("#date2").val();
    $.ajax({
        type: "get",
        url: "/tour/statisticsManOrWoman",
        data: {"year": year},
        dataType: "json",
        async: true,
        cache: false,
        beforeSend: function(){layer.load();},
        success: function(result){
            option.xAxis.data=result.dateList;
            option.series[0].data = result.manList;
            option.series[1].data = result.womanList;
            myChart.setOption(option);
        },
        error: function(){layer.alert("请求失败");},
        complete: function(){layer.closeAll("loading");}
    });
}
query2();

结果
在这里插入图片描述

和
在这里插入图片描述

18, 实战3-查询各年龄段旅游人数

(1), sql语句

-- 各年龄段旅游人数
select 
count(case when age <24 then 1 end) a,
count(case when age >=24 and age <= 30 then 1 end) b,
count(case when age >=31 and age <= 37 then 1 end) c,
count(case when age >=38 and age <= 55 then 1 end) d,
count(case when age >=56 and age <= 65 then 1 end) e,
count(case when age >=66 then 1 end) f
from tour

(2),设计静态页面

option = {
  title: {
    text: '各年龄段旅游人数',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      label: {
        formatter: '{b} {d}%'
      },
      data: [
        { value: 1048, name: '23岁以内' },
        { value: 735, name: '24-30岁' },
        { value: 580, name: '31-37岁' },
        { value: 484, name: '38-55岁' },
        { value: 300, name: '56-65岁' },
        { value: 300, name: '66岁' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

在这里插入图片描述

(3), 控制层代码

@GetMapping("/tour/statisticsAge")
@ResponseBody
public List<Map<String, Object>> statisticsAge(){
    //查询各个年龄段人数
    Map<String,Long> countMap = tourService.statisticsAge();

    List<Map<String, Object>> list = new ArrayList<>();
    Map<String, Object> mapa = new HashMap<>();
    Map<String, Object> mapb = new HashMap<>();
    Map<String, Object> mapc = new HashMap<>();
    Map<String, Object> mapd = new HashMap<>();
    Map<String, Object> mape = new HashMap<>();
    Map<String, Object> mapf = new HashMap<>();

    mapa.put("value", countMap.get("a"));
    mapa.put("name", "24岁以下");

    mapb.put("value", countMap.get("b"));
    mapb.put("name", "24-30岁");

    mapc.put("value", countMap.get("c"));
    mapc.put("name", "31-37岁");

    mapd.put("value", countMap.get("d"));
    mapd.put("name", "38-55岁");

    mape.put("value", countMap.get("e"));
    mape.put("name", "56-65岁");

    mapf.put("value", countMap.get("f"));
    mapf.put("name", "66岁以上");

    list.add(mapa);
    list.add(mapb);
    list.add(mapc);
    list.add(mapd);
    list.add(mape);
    list.add(mapf);
    return list;
}

(4), 页面代码

function query(){
    $.ajax({
        type: "get",
        url: "/tour/queryAgeGroup",
        data: {},
        dataType: "json",
        async: true,
        cache: false,
        beforeSend: function(){layer.load();},
        success: function(result){
            option.series[0].data = result;
            myChart.setOption(option);
        },
        error: function(){layer.alert("请求失败");},
        complete: function(){layer.closeAll("loading");}
    });
}
query();

结果
在这里插入图片描述

春哥的魔法书
关注
专栏目录
解决echarts图表使用v-show控制图表显示不全的问题
10-15
总结来说，解决Echarts图表使用`v-show`控制显示不全的问题，关键在于理解Vue的DOM更新机制以及Echarts的渲染原理。通过合理使用`Vue.nextTick`和选择合适的条件渲染指令，可以确保图表在正确的时间和条件下得到正确...
echarts图表示例大全
qq_44476779的博客
01-11 4277
图表示例集
工具：如何快乐食用echarts官网
qq_43548684的博客
11-22 1903
翻烂了echarts官网，终于搞明白怎么查阅手册最快啦！
ECharts零基础使用思路 图表案例网站推荐
monkey7
12-08 514
echarts0基础教程 如何从0开如整出一个饼图 各种图表案例网站推荐 echarts图表使用
ECharts官网地址
weixin_50680057的博客
10-05 2万+
https://echarts.apache.org/zh/index.html
Echarts图表基本使用
HakerDONG的博客
12-21 1030
Echarts基本使用
Echarts图表使用.zip
05-19
具体来说一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器，底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
qt 使用 echarts图表
04-21
标题"qt 使用 echarts图表"表明我们将探讨如何在Qt应用中利用Echarts来创建和展示图表。以下是一些关键知识点： 1. **Echarts的引入**：首先，要在Qt项目中使用Echarts，需要将Echarts的JavaScript库引入。这通常...
echarts图表导出excel示例
09-04
在本文中，我们将深入探讨如何使用ECharts图表库来实现数据的导出功能，特别是将图表数据导出为Excel格式。ECharts是一个基于JavaScript的数据可视化库，它提供了丰富的图表类型和强大的交互性，广泛应用于Web应用...
ECharts图表使用入门级代码
12-23
现在不少项目都需要用到图表展示，那么选择一个好的图表插件至关重要，众多图表插件对比了下，觉得百度的Echarts还是很不错的，样式很多，使用起来也简单，遇到不懂的还可以看看官方的API，这里给个最简单的使用例子...
echarts官网折线图
weixin_44591961的博客
02-03 955
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js"></script
echarts官网的网址
I18545361622的博客
11-22 3万+
http://echarts.apache.org/zh/index.html
echarts入门教程（超级详细带案例）
热门推荐
m0_55734030的博客
10-27 11万+
1.echarts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。 2.学习一项技术的关键，还是需要多读官方文档，官网链接Apache ECharts,与之类似的图表库还有D3，HeightCharts。 3.echarts的下载 （1）从 npm 获取 （2）从 CDN 获取 （3）从 GitHub 获取 （2）color调色盘 在 option 中设
关于ECharts的使用以及总结
qq_46220798的博客
07-12 141
ECharts图表使用
ECharts介绍及使用方法
weixin_58032613的博客
02-16 2648
ECharts是一个纯JavaScript图表库，底层依赖于轻量级的Canvas类库ZRender，基于BSD开原协议，是一款非常优秀的可视化前端框架。
vue使用echarts报init为undefined问题
青春不打烊的博客
06-25 4282
看了一下代码没有问题；于是查询了下资料得到解决，下边记录下解决过程： 搜了一下主要有几种说法，可以按照一下步骤排查： 1、检查一下echarts是否安装成功 2、如果安装成功了，可能是安装的版本过高。 删除原有的，重新安装指定版本。 npm uninstall echarts --save npm install echarts@4.8.0 --save 3、如果还不好用，查看一下自身的引用时是否引用得不对。 在main.js中改为 import *...
关于echarts那些事儿
哆来A梦没有口袋的博客
06-08 1221
引言：随着图表的应用增多，很多echarts的配置你一定要知道 echarts官网：https://echarts.apache.org/zh/tutorial.html 一.echarts的使用 项目中使用echarts分为两个方向，一个是利用脚手架
echarts(7大基础图表)的使用
qq_44930306的博客
05-28 2806
echarts基础应用
数据可视化-Echarts官网及社区整理
锵锵锵锵蒋的博客
02-24 4715
Echarts
echarts图表使用
最新发布
07-13
使用ECharts进行图表创建通常分为以下几个步骤： 1. **引入库**：在HTML文件中引入ECharts的JavaScript库和CSS样式。 ```html <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值