ECharts使用总结：属性解释+修改+效果展示+多个图表切换

缺乏、安全感 2022-05-20 02:35 363阅读 0赞

原文出处： [https://blog.csdn.net/webFront/article/details/79159534][https_blog.csdn.net_webFront_article_details_79159534]

最近做统计图表使用的是echarts插件，简单解释一下用到的每个配置项是干什么用的，以及效果展示在什么位置；

实现了多个图表切换的功能；

本人是入门级小白，有什么错误的地方请大神指示，最全最详细的解释还是去看官网的配置吧！配置项都在这里了http://echarts.baidu.com/option.html\#title，

![SouthEast][]

function weekSumShow (){
        var option = {
            tooltip: {
        //提示框组件
                trigger: 'axis'//触发类型，可选：'axis'，坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。'item'，数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。'none'，什么都不触发。
            },
            toolbox: {
        //工具栏,内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
                feature: {
        //各工具配置项。
                    dataView: {
        //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
                        show: true,//是否显示组件。
                        readOnly: false },
                    magicType:{
        //动态类型切换 示例：feature: { magicType: {type: ['line', 'bar', 'stack', 'tiled']}}
                        show:true,
                        type:['line','bar']
                    },
                    restore: {
        //配置项还原。
                        show: true },
                    saveAsImage: {
        //保存为图片。
                        show: true }
                }
            },
            grid: {
        //直角坐标系内绘图网格
                containLabel: true//grid 区域是否包含坐标轴的刻度标签。
            },
            legend: {
        //图例组件。图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
                data: ['累计活动数','新增活动数']//图例的数据数组。
            },
            dataZoom: {
        //dataZoom 组件 用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。
                type: 'slider',//滑动条型数据区域缩放组件
                start:0,//起始位置0
                end: 100//结束位置100
            },
            xAxis: [{
        //直角坐标系 grid 中的 x 轴
                type: 'category',//坐标轴类型。'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
                name:'周数',//坐标轴名称。
                axisTick: {
        //坐标轴刻度相关设置。
                    alignWithLabel: true//类目轴为true 的时候有效，可以保证刻度线和标签对齐;
                },
                data:x//类目数据，在类目轴（type: 'category'）中有效。
            }],
            yAxis: [{
        //直角坐标系 grid 中的 y 轴
                type: 'value',//坐标轴类型。'value' 数值轴，适用于连续数据。
                name: '数量'//坐标轴名称。
            }],
            series: [{
        //系列列表。每个系列通过 type 决定自己的图表类型
                name: '累计活动数',//系列名称，用于tooltip的显示，legend 的图例筛选，
                type: 'line',//系列类型
                stack: '总量',//数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加。
                yAxisIndex:0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                data: sumArray//二位数组，sumArray[i]表示在这一个坐标里有多少个柱状图，sumArray[i]里的数组长度表示X轴有多少坐标（这是我自己使用看到的效果，文档里还有别的用法）
            }, {
                name: '新增活动数',
                type: 'bar',
                animation: true,
                yAxisIndex:0,
                data:  allWeekArray
            }]
        };
        myChart.setOption(option);
    }

$(".tabToggle").click(function () {
        myChart.clear();
        switch( parseInt($(this).val()))
        {
            case 0 :
                weekShow();
                break;
            case 1 :
                weekSumShow();
                break;
            case 2 :
                monthShow();
                break;
            case 3 :
                monthSumShow();
                break;
        }
    });

[https_blog.csdn.net_webFront_article_details_79159534]: https://blog.csdn.net/webFront/article/details/79159534
[SouthEast]: /images/20220520/16e95914744d4795ae0f87d958a4acc6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，363人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue.js+ECharts：切换图表类型（图表工具栏）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly93dWRhbi5ibG9nLmNzZG4ubmV0

客官°小女子只卖身不卖艺/ 2023年06月30日 12:58/ 0 赞/ 50 阅读

相关 ECharts 图表显示颜色修改

ECharts 图表显示颜色修改需求：改变Echarts引入图表的显示颜色解决方案：通过查询Echarts配置手册，color设置色板颜色列表。

小咪咪/ 2023年02月23日 05:07/ 0 赞/ 41 阅读

相关 Echarts中图表展示标签值

图例： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N

桃扇骨/ 2022年12月27日 15:24/ 0 赞/ 270 阅读

相关 echarts图表切换数据时页面无法切换

我的效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

ゝ一纸荒年。/ 2022年12月05日 05:15/ 0 赞/ 517 阅读

相关 echarts图表的常用属性总结

一、位置摆放 1.图表的位置大小设置（x,y是相对外层的div）在grid\{\}里面进行x:,y:的设置，大小进行width和height设置） ![在这里插入图片

深藏阁楼爱情的钟/ 2022年11月26日 04:59/ 0 赞/ 199 阅读

相关修改Echart 图表主题颜色

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3l

矫情吗；*/ 2022年11月18日 13:59/ 0 赞/ 339 阅读

相关 Echarts 多个图表

[一个Option 四个均匀分布图表][Option] ![20180406111258634][] var dataAll = [

矫情吗；*/ 2022年05月28日 12:56/ 0 赞/ 372 阅读

相关 ECharts使用总结：属性解释+修改+效果展示+多个图表切换

原文出处： [https://blog.csdn.net/webFront/article/details/79159534][https_blog.csdn.net_webF

缺乏、安全感/ 2022年05月20日 02:35/ 0 赞/ 364 阅读

相关 springmvc使用echarts生成图表展示功能

编辑工具：Eclipse 项目：ssm(spring+springmvc+mybatis) 报表展示：使用echarts框架：效果展示： ![70][] 根据月报表数

谁借莪１个温暖的怀抱￠/ 2022年05月15日 10:54/ 0 赞/ 276 阅读

相关 bootstrap+echarts选项卡切换图表

1、效果 ![70][] ![70 1][] 2、代码(自定义依赖包路径) <!doctype html> <html lang="en">

迷南。/ 2021年06月11日 15:12/ 0 赞/ 657 阅读