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

最新推荐文章于 2025-05-22 10:09:27 发布

Suyuoa

最新推荐文章于 2025-05-22 10:09:27 发布

阅读量495

点赞数

分类专栏： Echarts笔记文章标签：前端 javascript

本文链接：https://blog.csdn.net/potato123232/article/details/128939127

版权

Echarts笔记专栏收录该内容

4 篇文章

订阅专栏

文章展示了如何在基于Vue2的CMS系统中使用ECharts实现月新增文章总数、分类文章数量比和文章访问量的可视化图表。详细介绍了每个图表的配置，包括颜色渐变、数据视图、图像切换、刷新和下载功能，并提供了示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

1.3.5 saveAsImage 下载图像

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>