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