附录3-大事件项目涉及到的图表

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6

项目地址 GitHub - Lencamo/big-event-cms: vue2前端cms的pc端入门项目使用技术vue2.0全家桶、axios、ECharts、element-ui、ESLint等等

目录

1  月新增文章总数

1.1  原版复刻

1.2  填充部分的颜色渐变

1.3  工具栏

1.3.1  title 工具提示

1.3.2  dataView 数据视图

1.3.3  magicType 图像切换

1.3.4  restore 刷新

1.3.5  saveAsImage 下载图像

2  分类文章数量比

2.1  原版复刻

2.2  增加一组数据

3  文章访问量

 

1  月新增文章总数

1.1  原版复刻

html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #curve_show {
            width: 700px;
            height: 550px;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div id="curve_show"></div>
</body>
<script src="../../jquery-3.6.1.min.js"></script>
<script src="../../5.4.0echarts.min.js"></script>
<script>
    var oChart = echarts.init(document.getElementById('curve_show'));
    var aList_all = [
        { 'count': 36, 'date': '2019-04-13' },
        { 'count': 52, 'date': '2019-04-14' },
        { 'count': 78, 'date': '2019-04-15' },
        { 'count': 85, 'date': '2019-04-16' },
        { 'count': 65, 'date': '2019-04-17' },
        { 'count': 72, 'date': '2019-04-18' },
        { 'count': 88, 'date': '2019-04-19' },
        { 'count': 64, 'date': '2019-04-20' },
        { 'count': 72, 'date': '2019-04-21' },
        { 'count': 90, 'date': '2019-04-22' },
        { 'count': 96, 'date': '2019-04-23' },
        { 'count': 100, 'date': '2019-04-24' },
        { 'count': 102, 'date': '2019-04-25' },
        { 'count': 110, 'date': '2019-04-26' },
        { 'count': 123, 'date': '2019-04-27' },
        { 'count': 100, 'date': '2019-04-28' },
        { 'count': 132, 'date': '2019-04-29' },
        { 'count': 146, 'date': '2019-04-30' },
        { 'count': 200, 'date': '2019-05-01' },
        { 'count': 180, 'date': '2019-05-02' },
        { 'count': 163, 'date': '2019-05-03' },
        { 'count': 110, 'date': '2019-05-04' },
        { 'count': 80, 'date': '2019-05-05' },
        { 'count': 82, 'date': '2019-05-06' },
        { 'count': 70, 'date': '2019-05-07' },
        { 'count': 65, 'date': '2019-05-08' },
        { 'count': 54, 'date': '2019-05-09' },
        { 'count': 40, 'date': '2019-05-10' },
        { 'count': 45, 'date': '2019-05-11' },
        { 'count': 38, 'date': '2019-05-12' },
    ];

    let aCount = [];
    let aDate = [];

    for (var i = 0; i < aList_all.length; i++) {
        aCount.push(aList_all[i].count);
        aDate.push(aList_all[i].date);
    }

    var chartopt = {
        title: {
            text: '月新增文章数',
            left: 'center',
            top: '10'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['新增文章'],
            top: '40'
        },
        toolbox: {
            show: true,
            feature: {
                dataView: { show: true, readOnly: false,title:'数据视图'},
                magicType: { show: true, type: ['line', 'bar'],title:{line:'切换为折线图',bar:'切换为柱状图'}},
                restore: { show: true,title:'还原'},
                saveAsImage: { show: true,title:'保存'}
            }
        },
        calculable: true,
        xAxis: [
            {
                name: '日',
                type: 'category',
                boundaryGap: false,
                data: aDate
            }
        ],
        yAxis: [
            {
                name: '月新增文章数',
                type: 'value'
            }
        ],
        series: [
            {
                name: '新增文章',
                type: 'line',
                smooth: true,
                itemStyle: { normal: { areaStyle: { type: 'default' }, color: '#f80' }, lineStyle: { color: '#f80' } },
                data: aCount
            }],
        areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                    offset: 0,
                    color: 'rgba(255,136,0,0.39)'
                },
                {
                    offset: 0.34,
                    color: 'rgba(255,180,0,0.25)'
                },
                {
                    offset: 1,
                    color: 'rgba(255,222,0,0.00)'
                }
            ])
        },
        grid: {
            show: true,
            x: 50,
            x2: 50,
            y: 80,
            height: 220
        }
    };

    oChart.setOption(chartopt);
</script>

</html>

1.2  填充部分的颜色渐变

areaStyle是填充部分里面有一个参数color是搞填充的颜色的

  • echarts版本不同写法略有不同我下面是5.4.0的写法

color后面不一定要接rgba值用rgb值能表示颜色的字符串都可以我们简单用一下比如让搞一个 红 -> 黄 -> 绿

像原版那种颜色如果不看源码很难做到100%一样但可以做到大概一样

1.3  工具栏

源码中有一个mark这个在文档中查不到我自己搞了一搞也不知道是干什么用的

1.3.1  title 工具提示

在5.4.0版本的echarts中需要加入title才能让工具栏的工具显示中文

如果不加的话显示的是英文

1.3.2  dataView 数据视图

点击后可以查看表的数据点close可以返回之前的图

readOnly是 是否只读如果写false就可以在这里修改表的数据

比如我将2019-04-13的数据改为1000之后点击refresh

点击后图像的数据有所变动

 

1.3.3  magicType 图像切换

一般是三种图像的切换line是线型图

bar是柱状图

还有一种是stack堆叠图是下图这样的有多个曲线的时候可以用堆叠图

1.3.4  restore 刷新

这个相当于局部刷新页面(只刷新这一张表)当你手动修改了一些数据后感觉不太好点击刷新就会重新显示后台的数据

1.3.5  saveAsImage 下载图像

点击后会弹出一个窗口

点击保存后会保存一张png图像

2  分类文章数量比

2.1  原版复刻

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #pie_show {
            width: 700px;
            height: 550px;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <div id="pie_show"></div>
</body>
<script src="../../jquery-3.6.1.min.js"></script>
<script src="../../5.4.0echarts.min.js"></script>
<script>
    var oPie = echarts.init(document.getElementById('pie_show'));
    var oPieopt =
    {
      title: {
        top: 10,
        text: '分类文章数量比',
        x: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      color: ['#5885e8', '#13cfd5', '#00ce68', '#ff9565'],
      legend: {
        x: 'center',
        top: 65,
        data: ['奇趣事', '会生活', '爱旅行', '趣美味']
      },
      toolbox: {
        show: true,
        x: 'center',
        top: 35,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          magicType: {
            show: true,
            type: ['pie', 'funnel'],
            option: {
              funnel: {
                x: '25%',
                width: '50%',
                funnelAlign: 'left',
                max: 1548
              }
            }
          },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      calculable: true,
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: ['45%', '60%'],
          center: ['50%', '65%'],
          data: [
            { value: 300, name: '奇趣事' },
            { value: 100, name: '会生活' },
            { value: 260, name: '爱旅行' },
            { value: 180, name: '趣美味' }
          ]
        }
      ]
    };
    oPie.setOption(oPieopt);
</script>
</html>

2.2  增加一组数据

3  文章访问量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #column_show {
            width: 700px;
            height: 400px;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div id="column_show"></div>
</body>
<script src="../jquery-3.6.1.min.js"></script>
<script src="../5.4.0echarts.min.js"></script>
<script>
    var oColumn = this.echarts.init(document.getElementById('column_show'));
    var oColumnopt =
    {
      title: {
        text: '文章访问量',
        left: 'center',
        top: '10'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['奇趣事', '会生活', '爱旅行', '趣美味'],
        top: '40'
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      calculable: true,
      xAxis: [
        {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月']
        }
      ],
      yAxis: [
        {
          name: '访问量',
          type: 'value'
        }
      ],
      series: [
        {
          name: '奇趣事',
          type: 'bar',
          barWidth: 20,
          itemStyle: {
            normal: { areaStyle: { type: 'default' }, color: '#fd956a' }
          },
          data: [800, 708, 920, 1090, 1200]
        },
        {
          name: '会生活',
          type: 'bar',
          barWidth: 20,
          itemStyle: {
            normal: { areaStyle: { type: 'default' }, color: '#2bb6db' }
          },
          data: [400, 468, 520, 690, 800]
        },
        {
          name: '爱旅行',
          type: 'bar',
          barWidth: 20,
          itemStyle: {
            normal: { areaStyle: { type: 'default' }, color: '#13cfd5' }
          },
          data: [500, 668, 520, 790, 900]
        },
        {
          name: '趣美味',
          type: 'bar',
          barWidth: 20,
          itemStyle: {
            normal: { areaStyle: { type: 'default' }, color: '#00ce68' }
          },
          data: [600, 508, 720, 890, 1000]
        }
      ],
      grid: {
        show: true,
        x: 50,
        x2: 30,
        y: 80,
        height: 260
      },
      dataZoom: [//给x轴设置滚动条
        {
          start: 0,//默认为0
          end: 100 - 1000 / 31,//默认为100
          type: 'slider',
          show: true,
          xAxisIndex: [0],
          handleSize: 0,//滑动条的 左右2个滑动条的大小
          height: 8,//组件高度
          left: 45, //左边的距离
          right: 50,//右边的距离
          bottom: 26,//右边的距离
          handleColor: '#ddd',//h滑动图标的颜色
          handleStyle: {
            borderColor: "#cacaca",
            borderWidth: "1",
            shadowBlur: 2,
            background: "#ddd",
            shadowColor: "#ddd",
          }
        }]
    };
    oColumn.setOption(oColumnopt);
</script>
</html>

在图表的下方有滚动条

是通过dataZoom做的

如果不用就可以给他屏蔽掉这样就可以显示完全了

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6
返回列表

上一篇：郑州商品交易所：率先落地原生分布式数据库为期货交易保驾护航

下一篇：HTTP 协议详解

“附录3-大事件项目涉及到的图表” 的相关文章

4.kafka--生产调优1年前 (2023-02-02)
工作流引擎架构设计1年前 (2023-02-02)
ClickHouse(11)ClickHouse合并树MergeTree家族表引擎之SummingMergeTree详细解析1年前 (2023-02-02)
通过Docker启动Solace，并在Spring Boot通过JMS整合Solace1年前 (2023-02-02)
基于Java+SpringBoot+vue等疫情期间在线网课管理系统详细设计实现1年前 (2023-02-02)
【python黑帽子】——（一）搭建扫描器入门介绍1年前 (2023-02-02)
Redis01之Windows版本的Redis安装配置1年前 (2023-02-02)
04HDFS简介1年前 (2023-02-02)
痞子衡单片机排行榜（2022Q4）1年前 (2023-02-02)
[概率论与数理统计]笔记：5.2 参数的最大似然估计与矩估计1年前 (2023-02-02)

阿里云国际版