echarts例子

最新推荐文章于 2024-09-30 14:28:41 发布
最新推荐文章于 2024-09-30 14:28:41 发布
阅读量62 收藏
点赞数
文章标签： javascript python ViewUI
原文链接：https://my.oschina.net/iioschina/blog/733651
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

----------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8"
>
    <title>echarts</title>
    <script src="./echarts.js" type="text/javascript"></script>
    <script src="./roma.js" type="text/javascript"></script>
</head>

<body>
    <div id="test" style="height:400px;"></div>
    <script type="text/javascript">

    var ec=echarts.init(document.getElementById("test"),"roma");
   var data = [
    [[28604,77,17096869,'Australia',1990],[31163,77.4,27662440,'Canada',1990],[1516,68,1154605773,'China',1990],[13670,74.7,10582082,'Cuba',1990],[28599,75,4986705,'Finland',1990],[29476,77.1,56943299,'France',1990],[31476,75.4,78958237,'Germany',1990],[28666,78.1,254830,'Iceland',1990],[1777,57.7,870601776,'India',1990],[29550,79.1,122249285,'Japan',1990],[2076,67.9,20194354,'North Korea',1990],[12087,72,42972254,'South Korea',1990],[24021,75.4,3397534,'New Zealand',1990],[43296,76.8,4240375,'Norway',1990],[10088,70.8,38195258,'Poland',1990],[19349,69.6,147568552,'Russia',1990],[10670,67.3,53994605,'Turkey',1990],[26424,75.7,57110117,'United Kingdom',1990],[37062,75.4,252847810,'United States',1990]],
    [[44056,81.8,23968973,'Australia',2015],[43294,81.7,35939927,'Canada',2015],[13334,76.9,1376048943,'China',2015],[21291,78.5,11389562,'Cuba',2015],[38923,80.8,5503457,'Finland',2015],[37599,81.9,64395345,'France',2015],[44053,81.1,80688545,'Germany',2015],[42182,82.8,329425,'Iceland',2015],[5903,66.8,1311050527,'India',2015],[36162,83.5,126573481,'Japan',2015],[1390,71.4,25155317,'North Korea',2015],[34644,80.7,50293439,'South Korea',2015],[34186,80.6,4528526,'New Zealand',2015],[64304,81.6,5210967,'Norway',2015],[24787,77.3,38611794,'Poland',2015],[23038,73.13,143456918,'Russia',2015],[19360,76.5,78665830,'Turkey',2015],[38225,81.4,64715810,'United Kingdom',2015],[53354,79.1,321773631,'United States',2015]]
];
     option = {
        backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
            offset: 0,
            color: '#f7f8fa'
        }, {
            offset: 1,
            color: '#cdd0d5'
        }]),
        title: {
            text: '1990-2015年各国家人均寿命和GDP'
        },
        legend: {
            right: 10,
            data: ['1991', '2009', '2019']

        },
        xAxis: {
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }


            }

        },
        yAxis: {
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            },
            scale: true

        },
        series: [{
                name: '1991',
                data: data[0],
                type: 'scatter',
                symbolSize: function(data) {
                    return Math.sqrt(data[2]) / 5e2;
                },
                lable: {
                    emphasis: {
                        show: true,
                        formatter: function(param) {
                            return param.data[3];
                        },
                        position: 'top'
                    }
                },
                itemStyle: {
                    normal: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(120, 36, 50, 0.5)',
                        shadowOffsetY: 5,
                        color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{


                            offset: 0,
                            color: 'rgb(251, 118, 123)'
                        }, {
                            offset: 1,
                            color: 'rgb(204, 46, 72)'
                        }])
                    }
                }
            }, {
                name: '2009',
                data: data[0],
                type: 'scatter',
                symbolSize: function(data) {
                    return Math.sqrt(data[2]) / 5e2;
                },
                lable: {
                    emphasis: {
                        show: true,
                        formatter: function(param) {
                            return param.data[3];
                        },
                        position: 'top'
                    }
                },
                itemStyle: {
                    normal: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(120, 36, 50, 0.5)',
                        shadowOffsetY: 5,
                        color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                            offset: 0,
                            color: 'rgb(251, 118, 123)'
                        }, {
                            offset: 1,
                            color: 'rgb(204, 46, 72)'
                        }])
                    }
                }
            }]
    };
    

    
    ec.setOption(option);
   
   
    </script>
</body>

</html>

------------------------------------------------------------------------------------------------------------------------------------------

 

标准雷达图

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8"
>
    <title>echarts</title>
    <script src="./echarts.js" type="text/javascript"></script>
    <script src="./roma.js" type="text/javascript"></script>
</head>

<body>
    <div id="test" style="height:400px;"></div>
    <script type="text/javascript">

    var ec=echarts.init(document.getElementById("test"),"roma");
option = {
    title : {
        text: '吃东西  vs 喝东西（eat vs drink)',
        subtext: '晚饭吃什么'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        orient : 'vertical',
        x : 'right',
        y : 'bottom',
        data:['吃（eat）','喝（drink）']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    polar : [
       {
           indicator : [
               { text: '咖喱牛肉盖饭（gali fan）', max: 30},
               { text: '串串香（chuanchuanxiang）', max: 30},
               { text: '绿豆粥（mung bean porridge）', max: 12},
               { text: '雪碧（sprite）', max: 10},
               { text: '优选酸奶（youxuan yogurt）', max: 10},
               { text: '伊利乳酸菌（Lactic acid bacteria）', max: 15}
            ]
        }
    ],
    calculable : true,
    series : [
        {
            name: '吃 vs 喝（eat vs drink）',
            type: 'radar',
            data : [
                {
                    value : [10, 20, 10, 8, 5, 5],
                    name : 'chi（eat）'
                },
                 {
                    value : [23, 28, 10, 5, 7, 10],
                    name : 'he（drink）'
                }
            ]
        }
    ]
};
                        
    
    ec.setOption(option);
   
   
    </script>
</body>

</html>


----------------------------------------------------------------------------------------------------------------------------------------------

标准折线图

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8"
>
    <title>echarts</title>

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

    <script src="./roma.js" type="text/javascript"></script>
</head>

<body>
    <div id="test" style="height:400px;"></div>
    <script type="text/javascript">

    var ec=echarts.init(document.getElementById("test"),"roma");

option = {
    title : {
        text: '未来一周花费',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['最高花费','最低花费']
    },
    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',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value',
            axisLabel : {
                formatter: '{value} 元'
            }
        }
    ],
    series : [
        {
            name:'最高花费',
            type:'line',
            data:[50,70, 60, 100, 90, 113, 110],
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'最低花费',
            type:'line',
            data:[10, 20, 22, 54, 32, 22, 19],
            markPoint : {
                data : [
                    {name : '周最低', value : 9, xAxis: 1, yAxis: 0}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name : '平均值'}
                ]
            }
        }
    ]
};
                                        
    
    ec.setOption(option);
   
   
    </script>
</body>

</html>


----------------------------------------------------------------------------------------------------------------------------------------------

转载于:https://my.oschina.net/iioschina/blog/733651

weixin_33871366
关注
echarts 实例
qq_43343499的博客
10-29 1962
echarts 实例 官方文档地址:/echarts.apache.org 一个网页中可以创建多个 echarts 实例。每个 echarts 实例 中可以创建多个图表和坐标系等等（用 option 来描述）。准备一个 DOM 节点（作为 echarts 的渲染容器），就可以在上面创建一个 echarts 实例。每个 echarts 实例独占一个 DOM 节点。 系列（series） 系列（series）是很常见的名词。在 echarts 里，系列（series）是指：一组数值以及他们映射成的图。“系列”
Echart 的实例
csdn_chenli
05-26 5507
这是我自己做的一些实例  有Echarts 部分属性的注释 学习网站：http://echarts.baidu.com/index.html ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直
Echarts 的例子
六月心悸
06-05 2408
jsp页面： <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> Echarts
echarts实例
08-29
输入数据会形成表格装数据,同时数据会形成对应的统计图,还可以选择统计图的类型.
Echarts实例
11-29
简单的Echars使用小demo,解压后，直接点html便可以看到效果
Echarts例子（多图）.rar
07-23
在这个"**Echarts例子（多图）.rar**"压缩包中，我们可以找到多个ECharts的示例代码和对应的图表展示，帮助开发者更好地理解和使用ECharts。 ECharts支持的图表类型包括但不限于： 1. 折线图（line）：常用于展示...
freemaker简单小例子+ECharts例子
03-07
在“ECharts例子”中，可能涉及以下内容： 1. **引入ECharts库**：在HTML文件中，通过`<script>`标签引入ECharts的JS库。 2. **准备图表容器**：在HTML中创建一个`div`元素作为ECharts图表的容器，给它一个唯一的...
delphi-json-echarts例子.zip
07-14
标题中的"delphi-json-echarts例子.zip"表明这是一个关于使用Delphi编程语言与JSON数据交互，并结合ECharts图表库创建示例应用的压缩包。ECharts是一个由百度开发的开源JavaScript图表库，用于在Web页面上展示各种...
echarts完整实例
10-20
这是我实际项目中的一个echarts完整实例，将echarts数值通过json方式从后台数据库中读取。
echarts的几个例子
07-21
echarts使用的包含柱状图等几个例子，其中zoomData图表中添加了计算选择的区间的方法，可以进行及时查询。
echarts示例代码
04-22
百度echarts的示例代码，有柱状图，折线图，雷达图
ECharts 实例
qq_46918406的博客
03-14 183
ECharts 实例
knowLedge-Vue I18n 是 Vue.js 的国际化插件
最新发布
2301_76671906的博客
09-30 982
Vue 2 中使用 Vue I18n 插件实现中英文切换
echarts布局例子
09-04
Echarts布局是一种用于数据可视化的JavaScript开源工具，它提供了多种灵活的布局方式以及丰富的图表类型，帮助用户更好地展示数据和分析结果。 下面以一个简单的柱状图为例来说明Echarts布局的使用。 首先，我们需要引入Echarts库并创建一个用来渲染图表的容器，如下所示： ```html <div id="chart" style="width: 400px; height: 300px;"></div> <script src="echarts.min.js"></script> ``` 然后，我们需要定义数据和配置项，用于描述图表的样式、布局和数据来源： ```javascript var data = [120, 200, 150, 80, 70]; var option = { title: { text: '销量统计' }, xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: { type: 'value' }, series: [{ data: data, type: 'bar' }] }; ``` 接着，我们使用Echarts提供的API将数据和配置项应用到我们之前创建的容器上： ```javascript var chart = echarts.init(document.getElementById('chart')); chart.setOption(option); ``` 最后，我们就可以在页面上看到生成的柱状图了。这个例子中，x轴表示不同的类别，y轴表示销量数量，柱状图的高度表示销量的大小。 总结来说，Echarts布局例子的使用步骤主要包括引入Echarts库、创建图表容器、定义数据和配置项、使用API应用到容器上。通过灵活的配置项和多样化的图表类型，Echarts可以帮助用户更直观地展示和分析数据，实现数据可视化的目的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值