echarts+折线图，柱状图，饼图，关联图，仪表盘

最新推荐文章于 2023-11-14 11:14:37 发布
最新推荐文章于 2023-11-14 11:14:37 发布
阅读量349 收藏
点赞数
分类专栏： 基础java 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aaaaaaddddsssss/article/details/109721836
版权

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
	<style type="text/css">
		div{
			float: left;
		}
	</style>
    <!-- 引入 echarts.js -->
    <script src="js/echarts-min.js"></script>
</head>
<body>
	 <div id="container3" style="width: 300px;height: 300px;"></div>
	 <div id="container2" style="width: 300px;height: 300px;"></div>
	 <div id="container1" style="width: 300px;height: 300px;"></div>
	
	  <div id="container" style="width: 300px;height: 300px;"></div>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
		
		
		
		
		var dom = document.getElementById("container");
		var myChart1 = echarts.init(dom);
		var app = {};
		option = null;
		option = {
		    title: {
		        text: '某站点用户访问来源',
		        subtext: '纯属虚构',
		        left: 'center'
		    },
		    tooltip: {
		        trigger: 'item',
		        formatter: '{a} <br/>{b} : {c} ({d}%)'
		    },
		    legend: {
		        orient: 'vertical',
		        left: 'left',
		        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
		    },
		    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: '搜索引擎'}
		            ],
		            emphasis: {
		                itemStyle: {
		                    shadowBlur: 10,
		                    shadowOffsetX: 0,
		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		                }
		            }
		        }
		    ]
		};
		;
		if (option && typeof option === "object") {
		    myChart1.setOption(option, true);
		}
		
		
		
		var dom = document.getElementById("container1");
		var myChart = echarts.init(dom);
		var app = {};
		option = null;
		option = {
		    title: {
		        text: '折线图堆叠'
		    },
		    tooltip: {
		        trigger: 'axis'
		    },
		    legend: {
		        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    toolbox: {
		        feature: {
		            saveAsImage: {}
		        }
		    },
		    xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
		    },
		    yAxis: {
		        type: 'value'
		    },
		    series: [
		        {
		            name: '邮件营销',
		            type: 'line',
		            stack: '总量',
		            data: [120, 132, 101, 134, 90, 230, 210]
		        },
		        {
		            name: '联盟广告',
		            type: 'line',
		            stack: '总量',
		            data: [220, 182, 191, 234, 290, 330, 310]
		        },
		        {
		            name: '视频广告',
		            type: 'line',
		            stack: '总量',
		            data: [150, 232, 201, 154, 190, 330, 410]
		        },
		        {
		            name: '直接访问',
		            type: 'line',
		            stack: '总量',
		            data: [320, 332, 301, 334, 390, 330, 320]
		        },
		        {
		            name: '搜索引擎',
		            type: 'line',
		            stack: '总量',
		            data: [820, 932, 901, 934, 1290, 1330, 1320]
		        }
		    ]
		};
		;
		if (option && typeof option === "object") {
		    myChart.setOption(option, true);
		}
		
		
		
		
		var dom = document.getElementById("container2");
		var myChart = echarts.init(dom);
		var app = {};
		option = null;
		option = {
		    title: {
		        text: 'Graph 简单示例'
		    },
		    tooltip: {},
		    animationDurationUpdate: 1500,
		    animationEasingUpdate: 'quinticInOut',
		    series: [
		        {
		            type: 'graph',
		            layout: 'none',
		            symbolSize: 50,
		            roam: true,
		            label: {
		                show: true
		            },
		            edgeSymbol: ['circle', 'arrow'],
		            edgeSymbolSize: [4, 10],
		            edgeLabel: {
		                fontSize: 20
		            },
		            data: [{
		                name: '节点1',
		                x: 300,
		                y: 300
		            }, {
		                name: '节点2',
		                x: 800,
		                y: 300
		            }, {
		                name: '节点3',
		                x: 550,
		                y: 100
		            }, {
		                name: '节点4',
		                x: 550,
		                y: 500
		            }],
		            // links: [],
		            links: [{
		                source: 0,
		                target: 1,
		                symbolSize: [5, 20],
		                label: {
		                    show: true
		                },
		                lineStyle: {
		                    width: 5,
		                    curveness: 0.2
		                }
		            }, {
		                source: '节点2',
		                target: '节点1',
		                label: {
		                    show: true
		                },
		                lineStyle: {
		                    curveness: 0.2
		                }
		            }, {
		                source: '节点1',
		                target: '节点3'
		            }, {
		                source: '节点2',
		                target: '节点3'
		            }, {
		                source: '节点2',
		                target: '节点4'
		            }, {
		                source: '节点1',
		                target: '节点4'
		            }],
		            lineStyle: {
		                opacity: 0.9,
		                width: 2,
		                curveness: 0
		            }
		        }
		    ]
		};;
		if (option && typeof option === "object") {
		    myChart.setOption(option, true);
		}
		
		
		
		var dom = document.getElementById("container3");
		var myChart = echarts.init(dom);
		var app = {};
		option = null;
		option = {
		    tooltip: {
		        formatter: '{a} <br/>{b} : {c}%'
		    },
		    toolbox: {
		        feature: {
		            restore: {},
		            saveAsImage: {}
		        }
		    },
		    series: [
		        {
		            name: '业务指标',
		            type: 'gauge',
		            detail: {formatter: '{value}%'},
		            data: [{value: 50, name: '完成率'}]
		        }
		    ]
		};
		
		setInterval(function () {
		    option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
		    myChart.setOption(option, true);
		},2000);
		;
		if (option && typeof option === "object") {
		    myChart.setOption(option, true);
		}
    </script>
</body>
</html>

echart.js
https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js
可以访问这个网址，把Ctrl+a全选，Ctrl+c复制，然后新建一个js文件Ctrl+v粘贴进去即可。

aaaaaaddddsssss
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts
wushangnb的博客
03-28 1617
文章目录echarts简介一、echarts实现步骤1.导入 echarts.min.js二. 初始化三、option（选项）1、title（标题 ）2、 legend（图例 ）3、tooltip（鼠标提示）4、xAxis: //x轴线5、yAxis:{}, //y轴线6、series（系列数据）四、颜色样式控制1、主题2、自定义主题3、调色板 echarts简介 百度开发团队制作，开源交个apache基金管理 制作图表的 javascript库 同类型产品 hightCharts D3 提示：以下是
echart自定义动画_设置ECharts动画的属性
weixin_39837124的博客
12-22 4911
animation设置ECharts是否开启动画。animationThreshold是否开启ECharts动画的阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画。animationDuration设置初始ECharts动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果：animationDuration: function (idx) {// 越...
echarts的xAxis和yAxis——x轴y轴以及网格线的详细配置
热门推荐
杜永康的博客
12-26 3万+
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] //坐标轴刻度文字数据。symbol: ['none', 'arrow'], //坐标轴箭头 (可选'none' 'arrow' ['none','arrow'])
html中实现饼图
Summer--楠的博客
08-26 8592
//饼图显示        //绘制 //绘制饼图 function drawCircle(canvasId, data_arr, color_arr, text_arr) { var c = document.getElementById(canva
【一】结合html与Echarts绘制饼状图
最新发布
weixin_51179975的博客
11-14 1845
Echarts是一个由百度开发的基于JavaScript语言的可视化图表库，里面包含了折线图、饼状图、柱状图、3D图等上百种图表绘制方法，可将其嵌入到大数据可视化界面中，实现炫酷的图表效果。 ECharts 遵循 Apache-2.0 开源协议，免费商用。 ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox等）及多种设备，可随时随地任性展示。在html中运用Echarts绘制图表的方法很多，在这里以饼状图为例讲解如何使用。使用的编辑器为VSCode。
使用echarts实现立体-柱状图
07-21
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的...
echarts 实例 地图 仪表盘
03-01
ECharts 是一个由百度开发的开源JavaScript数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图等，并且支持地图和仪表盘等多种复杂图表。在“echarts 实例 地图 仪表盘”这个主题中，我们将深入...
html5+echarts汽车仪表盘动画特效
06-11
ECharts则是一个由百度开发的开源JavaScript图表库，支持丰富的可视化图表类型，如折线图、柱状图、饼图等，同时也具有良好的性能和高度的可定制性。 在这个“html5+echarts汽车仪表盘动画特效”项目中，开发者利用...
JQ JS javascript echarts 多图表 多曲线 多柱状图 多饼图 多仪表盘 加载 多图表加载
04-18
ECharts则是百度开发的一个开源的JavaScript数据可视化库，它提供了丰富的图表类型，如折线图、柱状图、饼图和仪表盘，支持动态数据加载，非常适合用于数据分析和展示。 标题和描述中提到的"JQ JS javascript ...
jquery折线图仪表盘小例子
04-27
ECharts是一款由百度开发的开源JavaScript数据可视化库，它提供了丰富的图表类型，如折线图、柱状图、饼图以及仪表盘等，适用于大数据的展示和分析。 首先，让我们深入了解一下jQuery。jQuery是一个轻量级的...
Echarts实现的地图关联柱状图
08-19
Echarts实现的地图关联柱状图
HTML5绘制饼图实例（二）
03-26
NULL 博文链接：https://sarin.iteye.com/blog/1149851
v-charts, echarts动画设置
weixin_45924425的博客
08-24 1878
下面就是从官方文档总结出来的主要方法。在使用Vue的图表的时候，需要设置。
echarts饼图轮播效果
qq_44381427的博客
02-21 1928
echarts饼图轮播效果 echarts提供的dispatchAction方法可以控制饼图某一段“highlight”’高亮，或“downplay”取消高亮。利用定时器控制饼图循环高亮。 循环好做，主要是鼠标移入饼图也会触发高亮导致冲突，显示效果出现问题。需要同时监听echarts的mouseover事件，鼠标移入做特殊处理。 var option; var ele = document.getElementById("chart"); echarts.d
Echarts - 延长图表加载动画时间
王佳斌
06-01 2899
前言 每当页面加载完毕后，图表会有一个动画效果，利用两个配置项即可延长加载动画。 实现方法 在 series 配置项里加入以下代码： // 时间越长动画越慢 animationDuration: 2800, animationEasing: "cubicInOut", ...
echarts中设置图表 动画时长 缓动效果不生效
qq_28362477的博客
10-23 8337
根据echarts中的文档 附文档链接: https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-garm2jc4.html. // 配置 animationDuration 和 animationEasing 即可 series: [ { name: 'expected', itemStyle: { normal: { color: '#FF005A', lineSty
Html5饼图绘制（统计图）
liuyongfang0211的博客
01-19 9813
Html5饼图绘制（统计图） Html5提供了强大的绘图API，让我们能够使用javascript轻松绘制各种图形。本文将主要讲解使用HTML5绘制饼图（统计图）的方法。先看一下饼图效果： 这个图是动态生成的，根据传入的比例参数（数组），来动态绘制饼图。饼图的大小也是根据&lt;canvas&gt;高度来动态调整的。 全部代码如下： [html] &lt;!DOCTYPEhtml&g...
echarts实用篇（一）——饼状图
BloodyMandoo的博客
07-27 2万+
echarts实用篇（一）——饼状图 从官网上我们可以看到通常用到的有这几类： 常规饼状图 环形图 嵌套环形图 纹理饼图 南丁格尔玫瑰图 定制饼状图 下面来看看各类的基本做法，直接使用官网上的例子。 常规饼状图 代码主体： option = { title : { text: '某站点用户访问来源', subtext: '纯属虚构
Echars仪表盘、饼图、柱形图的动态数据添加，以及柱形图改变颜色
weixin_44888773的博客
10-25 700
1.仪表盘 仪表盘两个显示，并动态显示数据。 $.ajax({ type: "get", dataType:"json", url: "/dangerinformaticas/general", //获取json数据 success: function (data) { //后台获取动态数据 //mychars1 ...
echarts仪表盘
08-21
引用: ECharts（Enterprise Charts）是一个由百度开源的数据可视化库，它提供了丰富的图表类型和交互功能，包括仪表盘。ECharts仪表盘可以用于展示实时数据，如销售额、运营指标等，通过直观的图表形式让用户更好地了解数据的变化趋势和关键指标的状态。 ECharts仪表盘是一种数据可视化工具，通过图表的形式将数据以直观的方式展示出来。它可以用于监控和分析各种业务指标，如销售额、用户活跃度、运营指标等。在仪表盘中，可以使用不同的图表类型，如饼图、柱状图、折线图等，来呈现数据的不同维度和指标。此外，ECharts还提供了丰富的交互功能，如数据筛选、图表联动等，使用户可以更深入地探索数据。总之，ECharts仪表盘是一个强大的工具，可以帮助用户更好地理解和分析数据。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值