echart series data是对象 echarts series type

转载

码海航行侠 2024-04-21 08:17:38

文章标签 echarts javascript ecmascript 饼图数据 文章分类 架构后端开发

Apache ECharts图表类型以及示例代码

ECharts的图表类型是由每个系列通过 type 决定的：

ECharts的图表类型有：柱状/条形图，折线/面积图，饼图，南丁格尔图，散点（气泡）图，带有涟漪特效动画的散点（气泡），雷达图，树型图，旭日图，箱形图，K线图，热力图，地图，平行坐标系的系列，线图，关系图，桑基图，漏斗图，仪表盘，象形柱图，主题河流，自定义系列；

series: [{
    name: '统计',  // 系列名称
    type: 'bar',  // 系列图表类型
    data: [5, 10, 12, 16, 10, 14]  // 系列中的数据内容
}]

下列为ECharts的图表类型：

//柱状图/条形图
type: 'bar'

//折线/面积图
type: 'line'

//饼图
type: 'pie'

饼图下还有一个南丁格尔图（饼图的基础上增加roseType:'angle'属性）：

series:[
           {
               name:'访问来源',
               type:'pie',  //设置图标类型为饼图
               radius:'55%',   //饼图的半径，外半径为可视区尺寸（容器高宽中较小的一项）
               // 南丁格尔图
               roseType:'angle',
               data:[      //数据数组，那么为数据项名称，value为数据项值
                   {value:235,name:'视频广告'},
                   {value:274,name:'搜索引擎'},
                   {value:310,name:'邮件营销'},
                   {value:335,name:'直接访问'},
                   {value:400,name:'搜索引擎'}
               ]
           }
       ]

//散点（气泡）图
type: 'scatter'

//带有涟漪特效动画的散点（气泡）
type: 'effectScatter'

//雷达图
type: 'radar'

//树型图
type: 'tree'

//树型图
type: 'treemap'

//旭日图
type: 'sunburst'

//箱形图
type: 'boxplot'

//K线图
type: 'candlestick'

//热力图
type: 'heatmap'

//地图
type: 'map'

//平行坐标系的系列
type: 'parallel'

//线图
type: 'lines'

//关系图
type: 'graph'

//桑基图
type: 'sankey'

//漏斗图
type: 'funnel'

//仪表盘
type: 'gauge'

//象形柱图
type: 'pictorialBar'

//主题河流
type: 'themeRiver'

//自定义系列
type: 'custom'

完整示例代码如下：

<!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>echarts图表</title>
    <script src="js/echarts.js"></script>
</head>
<body>
    <!-- 设置DOM容器 -->
    <div id="main" style="width: 600px; height: 400px;"></div>
    <div id="main_bing" style="width: 600px; height: 400px;"></div>
    <script type="text/javascript">
        // 柱状图
        // 获取dom，实例化echarts实例
        var myChat = echarts.init(document.getElementById("main"));
        // console.log(myChat);
        // 指定图表的配置和数据
        var option = {
            title:{
                title:'一个echarts的实例'
            },
            tooltip:{},
            legend:{
                data:['青青草原']
            },
            xAxis:{
                data:['喜羊羊','美羊羊','懒羊羊','沸羊羊','暖羊羊','灰太狼','红太狼']
            },
            yAxis:{},
            series:[{
                name:'青青草原',
                type:'bar',
                data:[2,6,18,12,21,17,6]
            }]
        };
        // 饼图/南丁格尔图
        // 使用指定的配置项和数据显示图表
        myChat.setOption(option);
        var myChat_bing = echarts.init(document.getElementById("main_bing"));
        myChat_bing.setOption({
            series:[
                {
                    name:'访问来源',
                    type:'pie',  //设置图标类型为饼图
                    radius:'55%',   //饼图的半径，外半径为可视区尺寸（容器高宽中较小的一项）
                    // 南丁格尔图
                    // roseType:'angle',
                    data:[      //数据数组，那么为数据项名称，value为数据项值
                        {value:235,name:'视频广告'},
                        {value:274,name:'搜索引擎'},
                        {value:310,name:'邮件营销'},
                        {value:335,name:'直接访问'},
                        {value:400,name:'搜索引擎'}
                    ]
                }
            ]
        })
    </script>
</body>
</html>

echart series data是对象 echarts series type_数据