echarts 几种常见的图表的实现及源码

最新推荐文章于 2024-05-28 11:11:34 发布
最新推荐文章于 2024-05-28 11:11:34 发布
阅读量8.3k 收藏 15
点赞数 5
分类专栏： 工具 文章标签： echarts 源码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CCUTwangning/article/details/55190874
版权

1、折线图



<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts图表
    var myChart = echarts.init(document.getElementById('main'));

    var 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} °C'
                }
            }
        ],
        series: [
            {
                name: '最高气温',
                type: 'line',
                data: [11, 11, 15, 13, 12, 13, 10],
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            },
            {
                name: '最低气温',
                type: 'line',
                data: [1, -2, 2, 5, 3, 2, 0],
                markPoint: {
                    data: [
                        {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            }
        ]
    };
    myChart.setOption(option);
</script>
</body>

2、柱状图


<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts图表
    var myChart = echarts.init(document.getElementById('main'));

    var 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',
                data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        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],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }
            },
            {
                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],
                markPoint : {
                    data : [
                        {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
                        {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name : '平均值'}
                    ]
                }
            }
        ]
    };
    myChart.setOption(option);
</script>
</body>

3、饼状图 


<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts图表
    var myChart = echarts.init(document.getElementById('main'));

    var option = {
        title : {
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient : 'vertical',
            x : 'left',
            data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'left',
                            max: 1548
                        }
                    }
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        series : [
            {
                name:'访问来源',
                type:'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:335, name:'直接访问'},
                    {value:310, name:'邮件营销'},
                    {value:234, name:'联盟广告'},
                    {value:135, name:'视频广告'},
                    {value:1548, name:'搜索引擎'}
                ]
            }
        ]
    };
    myChart.setOption(option);
</script>
</body>
4、标准地图 



<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts图表
    var myChart = echarts.init(document.getElementById('main'));

    var option = {
        title : {
            text: 'iphone销量',
            subtext: '纯属虚构',
            x:'center'
        },
        tooltip : {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            x:'left',
            data:['iphone3','iphone4','iphone5']
        },
        dataRange: {
            min: 0,
            max: 2500,
            x: 'left',
            y: 'bottom',
            text:['高','低'],           // 文本，默认为数值文本
            calculable : true
        },
        toolbox: {
            show: true,
            orient : 'vertical',
            x: 'right',
            y: 'center',
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        roamController: {
            show: true,
            x: 'right',
            mapTypeControl: {
                'china': true
            }
        },
        series : [
            {
                name: 'iphone3',
                type: 'map',
                mapType: 'china',
                roam: false,
                itemStyle:{
                    normal:{label:{show:true}},
                    emphasis:{label:{show:true}}
                },
                data:[
                    {name: '北京',value: Math.round(Math.random()*1000)},
                    {name: '天津',value: Math.round(Math.random()*1000)},
                    {name: '上海',value: Math.round(Math.random()*1000)},
                    {name: '重庆',value: Math.round(Math.random()*1000)},
                    {name: '河北',value: Math.round(Math.random()*1000)},
                    {name: '河南',value: Math.round(Math.random()*1000)},
                    {name: '云南',value: Math.round(Math.random()*1000)},
                    {name: '辽宁',value: Math.round(Math.random()*1000)},
                    {name: '黑龙江',value: Math.round(Math.random()*1000)},
                    {name: '湖南',value: Math.round(Math.random()*1000)},
                    {name: '安徽',value: Math.round(Math.random()*1000)},
                    {name: '山东',value: Math.round(Math.random()*1000)},
                    {name: '新疆',value: Math.round(Math.random()*1000)},
                    {name: '江苏',value: Math.round(Math.random()*1000)},
                    {name: '浙江',value: Math.round(Math.random()*1000)},
                    {name: '江西',value: Math.round(Math.random()*1000)},
                    {name: '湖北',value: Math.round(Math.random()*1000)},
                    {name: '广西',value: Math.round(Math.random()*1000)},
                    {name: '甘肃',value: Math.round(Math.random()*1000)},
                    {name: '山西',value: Math.round(Math.random()*1000)},
                    {name: '内蒙古',value: Math.round(Math.random()*1000)},
                    {name: '陕西',value: Math.round(Math.random()*1000)},
                    {name: '吉林',value: Math.round(Math.random()*1000)},
                    {name: '福建',value: Math.round(Math.random()*1000)},
                    {name: '贵州',value: Math.round(Math.random()*1000)},
                    {name: '广东',value: Math.round(Math.random()*1000)},
                    {name: '青海',value: Math.round(Math.random()*1000)},
                    {name: '西藏',value: Math.round(Math.random()*1000)},
                    {name: '四川',value: Math.round(Math.random()*1000)},
                    {name: '宁夏',value: Math.round(Math.random()*1000)},
                    {name: '海南',value: Math.round(Math.random()*1000)},
                    {name: '台湾',value: Math.round(Math.random()*1000)},
                    {name: '香港',value: Math.round(Math.random()*1000)},
                    {name: '澳门',value: Math.round(Math.random()*1000)}
                ]
            },
            {
                name: 'iphone4',
                type: 'map',
                mapType: 'china',
                itemStyle:{
                    normal:{label:{show:true}},
                    emphasis:{label:{show:true}}
                },
                data:[
                    {name: '北京',value: Math.round(Math.random()*1000)},
                    {name: '天津',value: Math.round(Math.random()*1000)},
                    {name: '上海',value: Math.round(Math.random()*1000)},
                    {name: '重庆',value: Math.round(Math.random()*1000)},
                    {name: '河北',value: Math.round(Math.random()*1000)},
                    {name: '安徽',value: Math.round(Math.random()*1000)},
                    {name: '新疆',value: Math.round(Math.random()*1000)},
                    {name: '浙江',value: Math.round(Math.random()*1000)},
                    {name: '江西',value: Math.round(Math.random()*1000)},
                    {name: '山西',value: Math.round(Math.random()*1000)},
                    {name: '内蒙古',value: Math.round(Math.random()*1000)},
                    {name: '吉林',value: Math.round(Math.random()*1000)},
                    {name: '福建',value: Math.round(Math.random()*1000)},
                    {name: '广东',value: Math.round(Math.random()*1000)},
                    {name: '西藏',value: Math.round(Math.random()*1000)},
                    {name: '四川',value: Math.round(Math.random()*1000)},
                    {name: '宁夏',value: Math.round(Math.random()*1000)},
                    {name: '香港',value: Math.round(Math.random()*1000)},
                    {name: '澳门',value: Math.round(Math.random()*1000)}
                ]
            },
            {
                name: 'iphone5',
                type: 'map',
                mapType: 'china',
                itemStyle:{
                    normal:{label:{show:true}},
                    emphasis:{label:{show:true}}
                },
                data:[
                    {name: '北京',value: Math.round(Math.random()*1000)},
                    {name: '天津',value: Math.round(Math.random()*1000)},
                    {name: '上海',value: Math.round(Math.random()*1000)},
                    {name: '广东',value: Math.round(Math.random()*1000)},
                    {name: '台湾',value: Math.round(Math.random()*1000)},
                    {name: '香港',value: Math.round(Math.random()*1000)},
                    {name: '澳门',value: Math.round(Math.random()*1000)}
                ]
            }
        ]
    };
    myChart.setOption(option);
</script>
</body>

以上代码来自echarts 官网，我总结了常用的几种图表，实际应用中，讲js文件换成本地的就可以了



CCUTwangning
关注
  • 5
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
非常好用的Echarts饼图和折线图源码Demo
06-14
在公司搭建数据统计时用到的Echarts图表统计插件，源码已经下载了下来，有相关的js和css源文件，感兴趣的朋友可以下载使用！
ECharts仪表盘实例代码(附源码下载)
09-02
在ECharts中，创建仪表盘主要涉及以下几个关键知识点： 1. **初始化ECharts实例**： 首先需要在HTML页面中引入ECharts的库文件，如`<script src="echarts.min.js"></script>`。然后，创建一个具有特定宽度和高度的...
ECharts学习笔记
二木成林
05-25 1808
数据可视化 数据可视化主要目的:借助于图形化手段，清晰有效地传达与沟通信息。 数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。 常见的数据可视化库： D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难) ECharts.js 百度出品的一个开源 Javascript 数据可视化库 Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用 AntV 蚂蚁金服全新一代数据可视化解决方案
html实现图表的源代码,HTML5表格制作源代码.doc
weixin_42408865的博客
06-05 612
HTML5表格制作源代码(姬岚洋)代码：th{font-size:18px;text-align:center;padding-top:3px;background-color:#BDB76B;colot:#006400;}caption{font-size:18px;color:Black;}td{fomt-size:15px;border:1px solid #00B8B;paddding:3...
echarts(7大基础图表)的使用
最新发布
qq_44930306的博客
05-28 1365
echarts基础应用
Echarts使用小结
CSDN_1999的博客
09-22 634
还是先来简单的了解一下Echart是什么吧？ ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数...
【ECharts】从零实现echarts地图完整代码（纯前端，包含地图资源）
y_coder的博客
12-14 1860
echarts可视化2.5D地图，自定义地图纹理，伪热力图，高亮，自定义提示框，地图下钻，定位 logo 显示。完整代码，纯前端，下载完即可运行
基于ECharts智慧社区数据可视化大屏源码
12-03
在智慧社区的源码中，通常包含多个ECharts实例，每个实例对应一种图表。源码会定义不同的配置项，如series、dataset、tooltip、legend等，来定制图表的显示效果。通过阅读源码，可以学习如何根据实际需求调整参数，...
基于ECharts监控平台数据可视化大屏源码
12-03
1. **丰富的图表类型**：ECharts支持各种常见的图表，如直方图、折线图、饼图、散点图、地图、仪表盘等，还可以自定义复杂的组合图表。 2. **高度可定制**：ECharts允许开发者自定义图表样式、交互行为以及数据加载...
基于ECharts消防监控预警可视化大屏源码.rar
08-15
而“基于ECharts消防监控预警可视化大屏源码”正是这样一种技术应用，它利用ECharts这一强大的数据可视化库，构建出直观、生动的消防监控预警大屏幕，为消防决策提供强有力的数据支持。 ECharts，由百度开发的开源...
基于ECharts商品销售数据可视化大屏源码.rar
08-15
本项目"基于ECharts商品销售数据可视化大屏源码"旨在提供一种高效直观的方式来展示商品销售数据，帮助商业分析师快速理解销售状况，优化业务策略。 首先，我们需要理解ECharts的核心概念。ECharts是基于...
百度echarts使用教程之折线图demo案例源码
07-13
百度echarts使用教程之折线图demo案例源码，此文件可以直接运行看效果
echarts地图等相关js文件 源码下载
10-16
echarts地图等相关js文件 http://blog.csdn.net/liuchonge/article/details/52199100博客中需要的js文件都在这里
echart官方demo（完整版）
07-31
这个是关于echart的完整demo，里面包含了echart的众多样例，还有echart必需的js文件可供使用者使用，基本能满足web开发的需求
echarts自定义树状图，且每个系列柱子数不一
04-11
echarts自定义柱状图的形式，根据数据格式，横轴为多个系列项，每个系列项拥有的柱子数量不等，可自动计算柱子数量等分宽度显示。
HTML5图表框架echarts实战项目(源码)，大数据平台展示可视化效果
11-28
最近接了个任务需要用H5在前台两个大电视上做两页数据展示公司的产品数据，效果要高大上，还好之前接触过HTML5，所以第一时间想到就是echarts，这个框架对于数据展示尤其图表类处理的还是非常强大和炫酷的。经过大概一周左右的时间完美完成任务，同时也有几个非常不错的源码案例分享给大家，供借鉴参考，数据展示的形式基本都差不多，拿过去改改就能用，需要的请拿走，有问题也可以一起交流
Echarts源码阅读指南
_
01-31 4825
文章作者:萌萌哒的邱邱邱邱 原始链接:https://qiuruolin.github.io/2019/05/20/echarts-1/ 前言 由于echarts是基于zrender进行实现的，所以要解读echarts源码，首先要对zrender有大致的了解，在这篇文章中，我将对zrender的整体结构进行大致的解读。 介绍 zrender是canvas的一个类库，也就是说zrender是基于canvas实现的，canvas API可以参考：W3CSchool Canvas 参考手册 在后续的解
echarts常见图形-不同种类不同颜色柱状图(二)
qq_43167748的博客
01-13 1698
颜色分类柱状图一级目录1.最终效果图2.echarts文件(ncplxfx.js)3.vue文件中3.1 html3.2 js逻辑处理(引入ncplxfx.js) 一级目录 1.最终效果图 2.echarts文件(ncplxfx.js) import echarts from "echarts"; export const ncplxfxOption = (xData, sData) => { let colorArr = [ { top: "#097693",
Echarts柱状图
热门推荐
~~
03-16 2万+
图1： <template> <div id="chartBar" style="width: 700px; height: 300px"></div> </template> <script> import echarts from "echarts"; export default { data() { return { chartBar: null, category: [
echarts图表 html源码
12-28
Echarts 是一个使用 JavaScript 实现的开源可视化库，可以用来创建图表和数据可视化界面。要在 HTML 页面中使用 Echarts 图表，需要先引入 Echarts 的 JS 文件，然后创建一个具有一定大小的 DOM 容器，最后在 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值