Echarts学习一：制作简单的柱形图、折线图、饼图

最新推荐文章于 2024-04-08 14:05:40 发布

qingo00o

最新推荐文章于 2024-04-08 14:05:40 发布

阅读量1.1k

点赞数 1

分类专栏： JS学习 Echarts 文章标签：图表 ECharts

本文链接：https://blog.csdn.net/qingo00o/article/details/80031436

版权

JS学习同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

Echarts

1 篇文章 0 订阅

订阅专栏

具体可以参考官网文档，已经写的很详细了：个性化图表样式

ECharts 提供了丰富的自定义配置选项，并且能够从全局、系列、数据三个层级去设置数据图形的样式。ECharts 中的饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比，它的数据格式比柱状图更简单，只有一维的数值，不需要给类目。因为不在直角坐标系上，所以也不需要xAxis，yAxis。饼图的Data包含 name 和 value 属性的对象。
第一步：导入Echarts的JS文件：

<script type="text/javascript" src="js/echarts.common.min.js" ></script>

第二部：为Echarts的图表创建一个容器：

<div id="chartmain" style="width:600px; height: 400px;"></div>

第三部：填充容器：

<script type="text/javascript">
            var mycharts=echarts.init(document.getElementById("chartmain"));
            mycharts.setOption({
                //设置全局背景色
                backgroundColor: '#2c343c',
                //设置文字颜色
                 textStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
               },

                //设置标题
                title:{
                    backgroundColor:'rgb(128, 128, 128)',
                    text:"Echarts数据统计"
                },
                series:[{
                    name:'访问来源',
                    type:'pie',
                    roseType: 'angle',//设置南丁格尔图的配置项
                    radius:'55%',
                    //文字颜色等也可以在系列中单独设置，使用label标签
                    /*label: {
                        normal:{
                            textStyle: {
                            color: 'white'
                        },
                        }

                    },*/
                    //设置饼图的视觉引导线
                        labelLine: {
                            normal:{
                                lineStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            }
                            }
                        },
                    itemStyle: {//阴影的配置
                        // 阴影的大小
                        shadowBlur: 200,
                        // 阴影水平方向上的偏移
                        shadowOffsetX: 0,
                        // 阴影垂直方向上的偏移
                        shadowOffsetY: 0,
                        // 阴影颜色
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                        //鼠标 hover 时候的高亮样式
                         emphasis: {
                            shadowBlur: 200,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    data:[
                        {value:235,name:'视频广告'},
                        {value:274, name:'联盟广告'},
                        {value:310, name:'邮件营销'},
                        {value:335, name:'直接访问'},
                        {value:400, name:'搜索引擎'}
                    ]
                }]
            })
        </script>

效果图：
这里写图片描述

下面是柱形图的展示，如果需要展示折线图，只需要把type改成line就可以了：

<body>
        <div id="chartmain" style="width:600px; height: 400px;"></div>
        <script type="text/javascript">
            //指定图标的配置和数据
            var option ={
                title:{
                    text:"Echarts数据统计"
                },
                tooltip:{

                },
                legend:{
                    data:['用户来源']
                },
                xAxis:{
                    data:["Android","IOS","PC","Other"]
                },
                yAxis:{},
                series:[{
                    name:'访问量',
                    type:'bar',
                    data:[500,200,360,100]
                }]
            }
            var mycharts=echarts.init(document.getElementById("chartmain"));
            mycharts.setOption(option);
        </script>
    </body>

这里写图片描述

qingo00o

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Echarts学习一：制作简单的柱形图、折线图、饼图

具体可以参考官网文档，已经写的很详细了：个性化图表样式ECharts 提供了丰富的自定义配置选项，并且能够从全局、系列、数据三个层级去设置数据图形的样式。ECharts 中的饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比，它的数据格式比柱状图更简单，只有一维的数值，不需要给类目。因为不在直角坐标系上，所以也不需要xAxis，yAxis。饼图的Data包含 name 和 value 属...
复制链接

扫一扫