echarts饼状图mysql_Echarts3.0+JavaWeb+Mysql实现饼图，折线图，柱状图

要在 JavaWeb 中使用 ECharts 绘制饼状图，需要按照以下步骤进行操作：

1. 在 MySQL 数据库中创建一个表，用于存储饼状图所需的数据，例如：

CREATE TABLE `pie_data` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL,
  `value` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

2. 在 JavaWeb 项目中编写 Java 代码，从 MySQL 数据库中读取饼状图所需的数据，并将其转换为 ECharts 所需的格式，例如：

// 从 MySQL 数据库中读取数据
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/my_db", "user", "password");
Statement stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery("SELECT name, value FROM pie_data");

// 转换数据为 ECharts 所需的格式
JSONArray data = new JSONArray();
while (rs.next()) {
    JSONObject item = new JSONObject();
    item.put("name", rs.getString("name"));
    item.put("value", rs.getInt("value"));
    data.add(item);
}

// 将数据传递给前端页面
request.setAttribute("data", data.toJSONString());

在这个例子中，我们使用 JDBC API 从 MySQL 数据库中读取了饼状图所需的数据，并将其转换为 ECharts 所需的格式。然后将数据传递给前端页面，以便在页面中使用 ECharts 绘制饼状图。

3. 在 JSP 页面中引入 ECharts 的 JS 文件，并编写 JavaScript 代码，使用 ECharts 的 API 绘制饼状图，例如：

<script src="echarts.min.js"></script>
<div id="pieChart" style="width: 600px;height:400px;"></div>
<script>
    var pieChart = echarts.init(document.getElementById('pieChart'));
    var option = {
        title: {
            text: '饼状图示例',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 10,
            data: ['数据1', '数据2', '数据3', '数据4', '数据5']
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: <%= request.getAttribute("data") %>
            }
        ]
    };
    pieChart.setOption(option);
</script>

在这个例子中，我们创建了一个 id 为 `pieChart` 的 `<div>` 元素用于显示饼状图。然后使用 ECharts 的 API 创建了一个图表实例，并定义了图表的配置项和数据。其中，数据是从 Java 代码中传递过来的。最后使用 `setOption` 方法将配置项和数据应用到图表中，完成了饼状图的绘制。