duilib+cef+echarts (三) 在cef浏览器中用echarts绘制图表

at有你就好

已于 2023-03-23 10:45:11 修改

阅读量399

点赞数 1

分类专栏： duilib+cef 文章标签： echarts javascript ecmascript c++

于 2023-03-21 16:43:46 首次发布

本文链接：https://blog.csdn.net/weixin_44167436/article/details/129690414

版权

duilib+cef 专栏收录该内容

5 篇文章 4 订阅

订阅专栏

上篇我们讲了如何在duilib窗口中加载cef浏览器，并成功打开了百度网页，但这不是我们得目的，我们得目的是在上面使用echars显示图表

1.echarts安装

引入echarts有两种方式
（1）在线版：Staticfile CDN（国内） : https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js

jsDelivr：https://cdn.jsdelivr.net/npm/echarts@4.3.0/dist/echarts.min.js。

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js
需要连接网络使用，这里不推荐
（2）独立版
下载地址：https://echarts.apache.org/zh/download.html。
完全版：echarts/dist/echarts.js，体积最大，包含所有的图表和组件，所包含内容参见：echarts/echarts.all.js。
常用版：echarts/dist/echarts.common.js，体积适中，包含常见的图表和组件，所包含内容参见：echarts/echarts.common.js。
精简版：echarts/dist/echarts.simple.js，体积较小，仅包含最常用的图表和组件，所包含内容参见：echarts/echarts.simple.js。
2.html中绘制图表

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <!--<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>-->
	<script src="./echarts/dist/echarts.min.js"></script> 
	<script>
	
	</script>
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
-->
</head>
<body>
	<div class="input-group">
    </div>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 800px;height:400px;"></div>
    <script type="text/javascript">  
	
		var myChart = echarts.init(document.getElementById('main'));
			
        // 基于准备好的dom，初始化echarts实例
		var Waterquantity={"2009":24180.20,
						   "2010":30906.41,
						   "2011":23256.70,
						   "2012":29528.79,
						   "2013":27957.86,
						   "2014":27266.90,
						   "2015":27962.60,
						   "2016":32466.40,
						   "2017":28761.20,
						   "2018":29761.80
						   };
	
     
        // 指定图表的配置项和数据
        var option = {
		dataZoom:[{
			type:'inside'
		}],
		
		title:{
			text:'2009年-2018年中国水资源总量变化',
			textStyle: {fontSize:30,fontFamily:'宋体'},
			x:'center'
		 },
		color: ['#87CEFF'],
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				crossStyle: {
					color: '#999'
				}
			}
		},
		//toolbox: {
		//	feature: {
		//		magicType: {show: true, type: ['line', 'bar']},
		//	}
		//},
		legend: {
			data:['']
		},
			grid: {
			left: '10%',
			right: '10%',
			top:'15%',
			bottom: '15%',
			containLabel: true
		},
		xAxis: [
			{
				name: '年份',
				type: 'category',
				data: ['2009年','2010年','2011年','2012年','2013年','2014年','2015年','2016年','2017年','2018年'],
				//data: ['2009年','2010年','2011年','2012年','2013年','2014年'],
				axisPointer: {
					type: 'shadow'
				}
			}
		],
		yAxis: [
			{
				max: 35000,
				min: 20000,
				interval:2500,
				type: 'value',
				name: '总量',
				boundaryGap: 'ture',
				axisLabel: {
					formatter: '{value} 亿立方米'
				}
			},
		],
		series: [
			{
				type:'bar',
				barWidth: '50%',
				data:[Waterquantity["2009"],Waterquantity["2010"],Waterquantity["2011"],Waterquantity["2012"],Waterquantity["2013"],Waterquantity["2014"],Waterquantity["2015"],Waterquantity["2016"],Waterquantity["2017"],Waterquantity["2018"]]
				//data:[Waterquantity["2009"],Waterquantity["2010"],Waterquantity["2011"],Waterquantity["2012"],Waterquantity["2013"],Waterquantity["2014"]]
			}
			
		]
		};

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option,true,true);
		 // 处理点击事件并且弹出数据名称
        myChart.on('click', function (params) {
            alert(params.name);
        });		
		
    </script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
-->
</body>
</html>

在这里插入图片描述

上一章：duilib+cef+echarts (二) duilib加载cef浏览器

下一章：duilib+cef+echarts (四) duilib中加载cef浏览器多窗口

源码路径：
duilib+cef+echarts，cef多窗口，js与c++交互（带回调函数的）双向通信

at有你就好

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
duilib+cef+echarts (三) 在cef浏览器中用echarts绘制图表

上篇我们讲了如何在duilib窗口中加载cef浏览器，并成功打开了百度网页，但这不是我们得目的，我们得目的是在上面使用echars显示图表。
复制链接

扫一扫