前言
上一篇成功是EChart隨着Qt窗口變化而變化，本篇將開始正式介紹柱狀圖介紹、基礎使用，並將其封裝一層Qt。
本篇的demo實現了隱藏js代碼的方式，實現了一個條形圖的基本交互方式，即Qt調用js腳本操作html。
ECharts提供的純JS代碼編輯開發調試工具，可編輯js，並且查看運行效果：
https://echarts.apache.org/examples/zh/editor.html
開發過程中對於屬性的查詢和調試ECharts也提供了配置幫助。
官方配置手冊：https://echarts.apache.org/zh/option.html
隨便找一個預期目標：
使用EChart調試工具開發，先調試出基礎框架。
這裏貼出的全部代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- 引入剛剛下載的 ECharts 文件 -->
<!--<script src="echarts.js"></script>-->
<script src="./echarts.js"></script>
<!--<script src="D:/qtProject/echartsDemo/echartsDemo/modules/barEChartWidget/html/echarts.js"></script>-->
<!--<script src="echarts.min.js"></script>-->
<!--<script src="./echarts.min.js"></script>-->
<!--<script src="./html/echarts.min.js"></script>-->
<!--<script src="D:/qtProject/echartsDemo/echartsDemo/modules/barEChartWidget/html/echarts.min.js"></script>-->
</head>
<body>
<!--設置body跟隨查u哪個口，main填充body-->
<style>
#main,
html,
body{
width: 100%;
height: 100%;
overflow: hidden;
}
#main {
width: 100%;
height: 100%;
}
</style>
<div id="main"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 窗口高度變化設置
window.onresize = function() {
myChart.resize();
};
// 指定圖表的配置項和數據
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);
function initJs() {
var myChart = echarts.init(document.getElementById(