echarts_series总结

最新推荐文章于 2023-04-05 22:19:53 发布
最新推荐文章于 2023-04-05 22:19:53 发布
阅读量3.1w 收藏 66
点赞数 11
分类专栏： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44505901/article/details/110918713
版权

echarts_series总结

echarts官网实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echarts</title>
    <script src="./static/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width:600px;height:400px;"></div>
    <script>
        var myecharts=echarts.init(document.getElementById("main"));

        var option={
            title:{
                text:'标题',
                textStyle:{
                    color:'red',
                    fontSize:'12',
                    fontFamily:'fangsong',
                    fontWeight:'400',
                    fontStyle:'normal',

                },

                subtext:'副标题',
                subtextStyle:{
                    color:'red',
                },

                align:'center',
                x:'right',
                y:'top',
                textAlign:'center',
                padding:[5,10,5,10],
                itemGap:'4',
            },


            tooltip:{
                trigger:'axis',
                // item  主要在散点图，饼图等无类目轴的图表中使用。
                // axis  坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
                // none   什么都不触发
                axisPointer:{  // 坐标轴指示器配置项。
                    type:'line',
                    // line   直线指示器
                    //  'shadow' 阴影指示器
                    // 'none' 无指示器
                    // 'cross' 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。

                }

            },


            legend:{
                orient:'vertical',
                x:'right',
                y:'top',
                padding:[5,10,5,10],
                itemGap: '10',   // 图例间隔
                itemWidth:'25',   // 图例宽度
                itemHeight:'14',   //高度
                textStyle:{
                    fontSize:'12',
                    fontFamily: 'fangsong',

                },
                data:[],
                formatter:function(name){
                    return name+'%'
                }




            },


            xAxis:{
                name:'x轴名称',
                type:'category',  // value
                position:'top',   // x轴的位置，top, botttom
                nameLocation:'end',  //坐标轴名称显示位置
                // start,center,end
                axisLabel:{
                    interval:'0',  // 0是显示所有坐标轴标签名称
                    rotate:'90',
                    fontSize:'12',
                },

                axisTick:{
                    alignWithLabel:'true',
                    length:'5',
                },

                nameGap:'12',

                nameTextStyle:{
                    align:'left',
                },

                max:'',
                min:'',
                splitNumber:'5',
            },

            yAxis:{
                name:'y轴',
                position:'left',
                type:'value',
                namelocation:'end',
                nameTextStyle: {
                    color:'red',
                    fontSize:'12',
                    align:'left',

                },
                nameGap:'12',
                nameRotate:'90',
                min:'',
                max:'',
                splitNumber: '5',
                interval:'5',
            },



            // radar 是雷达图坐标系组件
            radar: {
                // shape: 'circle',
                name: {
                    textStyle: {
                        color: '#fff',
                        backgroundColor: '#999',
                        borderRadius: 3,
                        padding: [3, 5]
                    }
                },
                indicator: [
                    { name: '销售（sales）', max: 6500},
                    { name: '管理（Administration）', max: 16000},
                    { name: '信息技术（Information Techology）', max: 30000},
                    { name: '客服（Customer Support）', max: 38000},
                    { name: '研发（Development）', max: 52000},
                    { name: '市场（Marketing）', max: 25000}
                ]
            },






            series:[{
                name:'折线图',
                type:'line',  // 折线图
                stack:'',    // 数据堆叠
                data:[1,2,3,4,5,]

            }, {
                name: '柱状图',
                type: 'bar',
                barWidth: '40',  // 柱条的宽度
                barGap: '30%',  //  不同系列的柱间距离，为百分比（如 '30%'，表示柱子宽度的 30%）。

            },{
                name:'饼图',
                type:'pie',
                minAngle:'30',  // 最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
                roseType:"",
                //是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
                // 'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。
                // 'area' 所有扇区圆心角相同，仅通过半径展现数据大小。
                data:[{value:10,name:'a'},{value:11,name:'b'}]

            },{
                name:'散点图',
                type:'scatter',
                symbolSize:'',  // 散点大小




            },{
                name:'带有涟漪的散点图',
                type:'effectScatter',
                rippleEffect:{   // 涟漪特效相关配置。
                    scale:10    // 控制涟漪大小
                },



            },{
                name:'雷达图',
                type:'radar',
                areaStyle:{},   // 区域填充样式。
                data : [
                    {
                        value : [4300, 10000, 28000, 35000, 50000, 19000],
                        name : '预算分配（Allocated Budget）'
                    },
                    {
                        value : [5000, 14000, 28000, 31000, 42000, 21000],
                        name : '实际开销（Actual Spending）'
                    }
                ]



            }




            ]


        };

        myecharts.setOption(option);

    </script>

</body>
</html>

首先列举echarts官网实例中最常用的几种图形的series：

简单折线图：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

简单柱状图：

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',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
        }
    }]
};

多条柱状图

 series: [
        {
            name: 'Forest',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            data: [320, 332, 301, 334, 390]
        },
        {
            name: 'Steppe',
            type: 'bar',
            label: labelOption,
            data: [220, 182, 191, 234, 290]
        },
        {
            name: 'Desert',
            type: 'bar',
            label: labelOption,
            data: [150, 232, 201, 154, 190]
        },
        {
            name: 'Wetland',
            type: 'bar',
            label: labelOption,
            data: [98, 77, 101, 99, 40]
        }
    ]

堆叠柱状图

 series: [
        {
            name: '直接访问',
            type: 'bar',
            data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
            name: '邮件营销',
            type: 'bar',
            stack: '广告',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '联盟广告',
            type: 'bar',
            stack: '广告',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '视频广告',
            type: 'bar',
            stack: '广告',
            data: [150, 232, 201, 154, 190, 330, 410]
        },]

柱状and折线图

 xAxis: [
        {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: {
                type: 'shadow'
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '水量',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
                formatter: '{value} ml'
            }
        },
        {
            type: 'value',
            name: '温度',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
                formatter: '{value} °C'
            }
        }
    ],
    series: [
        {
            name: '蒸发量',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
        },
        {
            name: '降水量',
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
        },
        {
            name: '平均温度',
            type: 'line',
            yAxisIndex: 1,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
        }
    ]
};

在这里插入图片描述
饼图
没有x和y轴，

var data = genData(50);

option = {
    title: {
        text: '同名数量统计',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        type: 'scroll',
        orient: 'vertical',
        right: 10,
        top: 20,
        bottom: 20,
        data: data.legendData,

        selected: data.selected
    },
    series: [
        {
            name: '姓名',
            type: 'pie',
            radius: '55%',    // 的半径
            center: ['40%', '50%'], // 中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
            data: data.seriesData,
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};




function genData(count) {
    var nameList = [
        '赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危'
    ];
    var legendData = [];
    var seriesData = [];
    var selected = {};
    for (var i = 0; i < count; i++) {
        name = Math.random() > 0.65
            ? makeWord(4, 1) + '·' + makeWord(3, 0)
            : makeWord(2, 1);
        legendData.push(name);
        seriesData.push({
            name: name,
            value: Math.round(Math.random() * 100000)
        });
        selected[name] = i < 6;
    }

    return {
        legendData: legendData,
        seriesData: seriesData,
        selected: selected
    };

    function makeWord(max, min) {
        var nameLen = Math.ceil(Math.random() * max + min);
        var name = [];
        for (var i = 0; i < nameLen; i++) {
            name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);
        }
        return name.join('');
    }
}




其中饼图的数据形式是

data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 274, name: '联盟广告'},
                {value: 235, name: '视频广告'},
                {value: 400, name: '搜索引擎'}

雷达图

option = {
    title: {
        text: '基础雷达图'
    },
    tooltip: {},
    legend: {
        data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
    },
    radar: {
        // shape: 'circle',
        name: {
            textStyle: {
                color: '#fff',
                backgroundColor: '#999',
                borderRadius: 3,
                padding: [3, 5]
            }
        },
        indicator: [
		// 雷达图的指示器，用来指定雷达图中的多个变量（维度）
            { name: '销售（sales）', max: 6500},
            { name: '管理（Administration）', max: 16000},
            { name: '信息技术（Information Techology）', max: 30000},
            { name: '客服（Customer Support）', max: 38000},
            { name: '研发（Development）', max: 52000},
            { name: '市场（Marketing）', max: 25000}
        ]
    },
    series: [{
        name: '预算 vs 开销（Budget vs spending）',
        type: 'radar',
        // areaStyle: {normal: {}},
        data: [
            {
                value: [4300, 10000, 28000, 35000, 50000, 19000],
                name: '预算分配（Allocated Budget）'
            },
            {
                value: [5000, 14000, 28000, 31000, 42000, 21000],
                name: '实际开销（Actual Spending）'
            }
        ]
    }]
};

在这里插入图片描述

王轩12
关注
  • 11
    点赞
  • 踩
  • 66
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Echarts中常用的参数总结以及参数自定义示例_echarts series参数
2301_76379606的博客
04-29 363
scale: true, // 设置数据自动缩放，要不然数据多的话就堆一块了。itemWidth: 10, // 设置宽度。itemHeight: 10, // 设置高度。itemGap: 40 // 设置间距。name: “答辩评分”,
Echarts中series、option、component究竟是啥？
sd6022的博客
12-28 8997
Echarts创建 一个网页中可以创建多个echarts图例。一个DOM节点可作为echarts的渲染容器。每个DOM节点只能放一个echarts实例。 series 系列 一个系列至少包含的要素为：一组数值，图表类型（series.type），以及其他的关于这些数据如何映射成图的参数。 图表类型 echarts中的图表类型主要为：line-折线，bar-柱状图，pie-饼图，scatter-散点图，graph-关系图，tree-树图，等等 类同地，系列的数据从dataset中获取的另一种配置方式。 c
echarts_series总结，echarts-series总结，series总结
imkaifan的博客
06-02 655
echarts_series总结，echarts-series总结，series总结
八、Echart图表 之 series盒须图（箱体图）基本使用与配置大全
weixin_55181759的博客
05-31 6936
🍓 作者主页：💖仙女不下凡💖 🍓 前言介绍：以下👇内容是我个人对于该技术的总结，如有不足与错误敬请指正！ 🍓 欢迎点赞👍 收藏⭐ 留言📝 相关账号会持续发布关于文章Echart的相关文章欢迎持续关注！ 🍓Echart官网地址：https://echarts.apache.org/examples/zh/index.html#chart-type-line 有没有人看不懂箱体图的意义，如果可以看懂，跳过下面这段内容， 箱体图作用： 箱体图含义：1.箱子的中间一条线，是数据的中位数，代表了样本数据的平均水平。
echarts参数详细介绍
夜空孤狼啸的博客
09-13 4336
echarts详细参数介绍
echarts回顾之基本使用一
test_00的博客
03-29 198
一，下载echarts相关jar包 此处采用js文件自定义下载: 在构建页面选择完所需模块之后，选择下载： 二，基础概念series 系列（series）是很常见的名词。在 echarts 里，系列（series）是指：一组数值以及他们映射成的图。“系列”这个词原本可能来源于“一系列的数据”，而在 echarts 中取其扩展的概念，不仅表示数据，也表示数据映射成为的图。所以，一个 系列 包含的要素至少有：一组数值、图表类型（series.type）、以及其他的关于这些数据如何映射成图的参数。 echar
详解ECharts使用心得总结
09-01
**ECharts 使用心得总结** ECharts 是一个基于 JavaScript 的开源可视化库，由百度开发并维护。它提供了丰富的图表类型，包括折线图、柱状图、饼图、散点图等，同时也支持地图的绘制。在本文中，我们将探讨ECharts...
echarts3 使用总结（绘制各种图表,地图）
08-31
【ECharts3 使用详解——绘制各种图表与地图】 ECharts 是一个基于 JavaScript 的开源可视化库，广泛应用于数据可视化场景，包括但不限于柱状图、折线图、饼图以及地图等。ECharts3 是其第三个主要版本，提供了丰富...
echarts图表导出excel示例
09-04
配置选项包括`tooltip`、`legend`、`toolbox`、`xAxis`、`yAxis`以及`series`等，这些都是ECharts图表的基本组成部分。`toolbox`部分尤其值得注意，因为它包含了导出图表的按钮，如数据视图、魔法类型、恢复和保存为...
ExtJs整合Echarts的示例代码
10-18
总结起来，整合ExtJs和Echarts的关键在于正确地布局组件，以及正确地设置Echarts的配置选项以适应数据。通过这种方式，我们可以在同一个页面中同时展示图表和表格，为用户提供更加直观的数据展示体验。此外，Echarts...
vue 项目引入echarts 添加点击事件操作
10-14
总结，本文主要介绍了在Vue项目中引入ECharts并添加点击事件监听器的步骤，以及如何利用Vue Router的路由守卫实现用户权限控制。这些技术在实际开发中非常实用，能帮助构建安全、功能丰富的Web应用。
如何理解echarts中的系列series和维度dimensions
最新发布
TreepoBear的博客
04-05 1833
当然这只是画图展示的维度，分组下钻可以无限钻下去的，举个例子，做AB实验，实验组别=》每个实验组别里面再分组。毕竟直角坐标系是个二维的图，把取值这个维度放在y轴，只剩下一个维度x轴。直角坐标系，自带两个维度，x和y。如果再分个组，有四个维度了，只能组合其中两个维度，比如x轴放年份，颜色是A组-MachaLatte这种组合的形式。官网的例子里，x轴的类型是类目轴category，而且含义就是类目，类目这个维度体现在x轴上。对于不同的坐标系，有不同的映射方式，最经典的，直角坐标系，指定x，y用哪个维度。
echart的series理解
qq_58307541的博客
02-11 877
使用vue+echart完成百分比图，空心饼图_来了波，兄嘚-CSDN博客_vue 比例图
echart 动画 饼图_Echarts学习之四：series-pie饼图
weixin_33204286的博客
12-23 937
mytextStyle={color:"#333", //文字颜色fontStyle:"normal", //italic斜体 oblique倾斜fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400...fontFamily:"sans-serif", ...
echarts 点击按钮动态添加series
qq_46663394的博客
01-06 4237
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 List item 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如
echarts环形图（饼图）动态生成series，动态生成data，动态颜色控制（包含ajax交互）
热门推荐
TinaSprunt的开发笔记
05-12 1万+
自己做的小demo，效果如上图初始要求是生成整个作业的所有客观题的环形表（也就是具体有几个题目不确定，每个题目有几个选项不确定，都由后台数据决定，不能写死）第一步：先写出最基础的环形图代码（这里将生成环形图封装成了一个函数，方便ajax交互时调用）/*生成环形图函数*/$.pie_func = function (item_id,item_op) {        var myChart = ec...
vue echarts 动态添加 series 数据
qq_36437172的博客
02-18 8051
何为动态添加 series 数据？由于 series 中的个数是动态的，通过接口返回的，我们需要对series 做动态处理。 处理动态 series 的数据： let result = [{"name": "大修","data": [0]},{"name": "二保","data": [101]},{"name": "事故","data": [0] }, {"name": "外修","...
echarts 多个series_基于echarts异步加载数据之多个series加载实例
weixin_39810441的博客
12-22 1128
基于本人最近在参与研究公司echarts报表部分的功能，其中遇到了不少的坑，这里将echarts异步加载 json 数据中涉及到的多个series加载实例问题解决方案做一个共享。问题描述我们在加载echarts复杂图形时，比如说折线图和柱状图结合，会涉及到多个series样式，给个例子, option = {tooltip: {trigger: 'axis',formatter: functio...
总结echarts的series、dataset、option、坐标系使用方法
03-23
ECharts是一个基于JavaScript的开源可视化库，用于构建交互式的图表和可视化数据。下面是对ECharts的一些核心概念的总结： 1. Series：Series是ECharts中最基本的组件，用于表示数据系列。每个系列可以包含多个数据项，每个数据项可以包含多个维度的数据。 2. Dataset：Dataset是ECharts中用于管理数据的组件，可以将数据按照维度进行划分，方便进行数据的筛选、聚合和计算。 3. Option：Option是ECharts中用于配置图表的组件，包含了图表的各种配置项，如标题、图例、坐标轴、系列等。 4. 坐标系：ECharts中支持多种坐标系，如直角坐标系、极坐标系、地图坐标系等，用于展示不同类型的数据。 总之，ECharts是一个功能强大的可视化库，通过灵活的配置和组件的组合，可以实现各种类型的数据可视化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值