Echarts开源可视化库学习(二)常用图表的实现与效果

最新推荐文章于 2023-11-28 11:45:13 发布

半岛铁盒@

最新推荐文章于 2023-11-28 11:45:13 发布

阅读量1.3k

点赞数 1

分类专栏：前端大数据项目文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/weixin_45556441/article/details/121781009

版权

大数据项目同时被 2 个专栏收录

9 篇文章 1 订阅

订阅专栏

前端

6 篇文章 2 订阅

订阅专栏

在这里插入图片描述

一.柱状图

在这里插入图片描述

一.Echarts最基本的代码结构

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>   
</head>

<body>
  <div style="width: 600px;height:400px"></div> 
  <script>
    //1. ECharts最基本的代码结构
    var mCharts = echarts.init(document.querySelector("div")) // 初始化echarts实例对象
    var option = {
     
          }
    //将配置项设置给echarts实例对象
    mCharts.setOption(option)
  </script>
</body>

</html>

x轴数据和y轴数据

在这里插入图片描述

图标类型:option编写

var option = {
      xAxis:{
        type:'category',   //类目轴
        data: xDataArr
      },
      yAxis:{
        type: 'value', // 数值轴,  数据通过series 进行配置
      },
      series:[
        {
          name: '语文',
          type: 'bar',
          data: yDataArr
        }
      ]
          }
    //将配置项设置给echarts实例对象
    mCharts.setOption(option)

代码与效果

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>   
</head>

<body>
  <div style="width: 600px;height:400px"></div> 
  <script>
    //1. ECharts最基本的代码结构
    var mCharts = echarts.init(document.querySelector("div")) // 初始化echarts实例对象
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
    var option = {
      xAxis:{
        type:'category',   //类目轴
        data: xDataArr
      },
      yAxis:{
        type: 'value', // 数值轴,  数据通过series 进行配置
      },
      series:[
        {
          name: '语文',
          type: 'bar',
          data: yDataArr
        }
      ]
          }
    //将配置项设置给echarts实例对象
    mCharts.setOption(option)
  </script>
</body>

</html>

在这里插入图片描述

对柱状图的一些优化和修改

1.显示最大最小值

.markPoint:{
            data:[
              {
                type: 'max',neme: '最大值'
              },
              {
                type: 'min',name: '最小值'
              }
            ]
          },

在这里插入图片描述
在series里面,添加markPoint方法

2.通过label配置显示数据

label:{
            show: true
          },

使数据精确显示具体数据
在这里插入图片描述

半岛铁盒@

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录