Integrating ECharts with ThinkPHP 3.2.3 for Dynamic Charts
Step 1: Downlaod ECharts
You can fetch the ECharts library using a direct dwonload or a CDN. For simplicity, include the minified script via CDN in your view file:
<script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>
Alternatively, use the official CDN for the latest version:
<script src="https://echarts.baidu.com/dist/echarts.min.js"></script>
Step 2: Configure ECharts in Your View
- Include the library within your HTML file:
<script src="//cdn.bootcss.com/echarts/3.3.2/echarts.min.js"></script>
- Create a container with defined dimensions for the chart:
<div id="main" style="width: 100%; height: 400px;"></div>
- Initialize the chart and set up the configuration object:
var chartInstance = echarts.init(document.getElementById('main'));
var chartOptions = {
title: { text: 'Sales Data' },
tooltip: {},
legend: { data: ['Sales'] },
xAxis: { data: ['Shirt', 'Sweater', 'Chiffon', 'Pants', 'Heels', 'Socks'] },
yAxis: {},
series: [{
name: 'Sales',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
chartInstance.setOption(chartOptions);
Complete Example
Below is a full working example that you can place inside a ThinkPHP view file (e.g., index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts with ThinkPHP</title>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="chartContainer" style="width: 600px; height: 400px;"></div>
<script>
var dom = document.getElementById('chartContainer');
var myChart = echarts.init(dom);
var config = {
title: { text: 'Example Chart' },
tooltip: {},
legend: { data: ['Quantity'] },
xAxis: { data: ['A', 'B', 'C', 'D', 'E', 'F'] },
yAxis: {},
series: [{
name: 'Quantity',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
myChart.setOption(config);
</script>
</body>
</html>
This example demonstrates a basic bar chart. For dynamic data from ThinkPHP, you can replace the hardcoded arrays with PHP variables passed to the view.
