上篇我们讲了如何在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++交互（带回调函数的）双向通信
