import * as echarts from 'echarts'; var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; let xAxisData = []; let data1 = []; let data2 = []; let data3 = []; let data4 = []; for (let i = 0; i < 10; i++) { xAxisData.push('Class' + i); data1.push(+(Math.random() * 2).toFixed(2)); data2.push(+(Math.random() * 5).toFixed(2)); data3.push(+(Math.random() + 0.3).toFixed(2)); data4.push(+Math.random().toFixed(2)); } var emphasisStyle = { itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0,0,0,0.3)' } }; option = { legend: { data: ['bar', 'bar2', 'bar3', 'bar4'], left: '10%' }, brush: { toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'], xAxisIndex: 0 }, toolbox: { feature: { magicType: { type: ['stack'] }, dataView: {} } }, tooltip: {}, xAxis: { data: xAxisData, name: 'X Axis', axisLine: { onZero: true }, splitLine: { show: false }, splitArea: { show: false } }, yAxis: {}, grid: { bottom: 100 }, series: [ { name: 'bar', type: 'bar', stack: 'one', emphasis: emphasisStyle, data: data1 }, { name: 'bar2', type: 'bar', stack: 'one', emphasis: emphasisStyle, data: data2 }, { name: 'bar3', type: 'bar', stack: 'two', emphasis: emphasisStyle, data: data3 }, { name: 'bar4', type: 'bar', stack: 'two', emphasis: emphasisStyle, data: data4 } ] }; myChart.on('brushSelected', function (params) { var brushed = []; var brushComponent = params.batch[0]; for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) { var rawIndices = brushComponent.selected[sIdx].dataIndex; brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', ')); } myChart.setOption({ title: { backgroundColor: '#333', text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'), bottom: 0, right: '10%', width: 100, textStyle: { fontSize: 12, color: '#fff' } } }); }); option && myChart.setOption(option);

这段代码使用 ECharts 绘制了一个柱状图，并添加了区域选择功能。具体来说，代码中定义了 x 轴、y 轴、柱状图系列等基本配置，同时添加了区域选择的工具箱和 brushSelected 事件处理函数。

在 brushSelected 事件处理函数中，获取到选择的数据索引，并将其显示在图表下方的标题中。这样用户就可以通过选择区域来获取需要的数据，然后进行其他操作。

需要注意的是，代码中需要引入 ECharts 库并初始化图表，同时还需要在 HTML 中添加一个 div 元素，其 id 为 main，用于渲染图表。

相关问题

import * as echarts from 'echarts'; var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line' } ] }; option && myChart.setOption(option); vue2 引入完整代码

在 Vue2 中，你可以将这个 echarts 图表封装成一个组件，以便在 Vue2 的模板中重复使用。以下是一个完整的 Vue2 组件的代码示例：

<template>
  <div :id="chartId" style="width: 100%; height: 500px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  props: {
    chartId: {
      type: String,
      required: true,
    },
    data: {
      type: Array,
      required: true,
    },
    xLabels: {
      type: Array,
      required: true,
    },
  },
  mounted() {
    const chartDom = document.getElementById(this.chartId);
    const myChart = echarts.init(chartDom);
    const option = {
      xAxis: {
        type: 'category',
        data: this.xLabels,
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: this.data,
          type: 'line',
        },
      ],
    };
    myChart.setOption(option);
  },
};
</script>

在这个组件中，我们接受三个属性：`chartId` 表示 echarts 图表的 DOM 元素 id，`data` 表示折线图的数据数组，`xLabels` 表示 x 轴的标签数组。在 `mounted()` 钩子函数中，我们通过 `echarts.init` 初始化 echarts 实例，并将其绑定到指定的 DOM 元素上。然后，我们定义了一个 `option` 对象，其中包含了 x 轴和 y 轴的数据以及一个折线图系列的数据。最后，我们通过 `myChart.setOption(option)` 方法将这个 `option` 对象应用到 echarts 实例上，从而呈现出一个折线图。

你可以在父组件中使用这个 echarts 图表组件，例如：

<template>
  <div>
    <echarts-chart chartId="my-chart" :data="chartData" :xLabels="chartLabels" />
  </div>
</template>

<script>
import EchartsChart from './EchartsChart.vue';

export default {
  components: {
    EchartsChart,
  },
  data() {
    return {
      chartData: [150, 230, 224, 218, 135, 147, 260],
      chartLabels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    };
  },
};
</script>

在这个父组件中，我们将 echarts 图表组件引入，并传递了 `chartId`、`data` 和 `xLabels` 这三个属性。这样，我们就可以在父组件中动态地修改图表数据和标签，而图表组件将自动更新并重新渲染 echarts 图表。

<%@page pageEncoding="UTF-8" import="java.sql.*"%> <!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> <title>柱状图显示数值</title> </head> <body style="height:600px; margin: 0"> <div id="main" style="width: 2000px;height:80%;"></div> <script type="text/javascript" src="js/echarts.min.js"></script> <script> function show(title,value){ var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { // 标题 title: { text: 'ECharts 入门示例' }, // 工具箱 toolbox: { show: true, feature: { dataZoom: { yAxisIndex: 'none' }, dataView: {readOnly: false}, magicType: {type: ['line', 'bar']}, restore: {}, saveAsImage: {} } }, // 图例 legend: { data: ['销量'] }, // x轴 xAxis: { data: title }, yAxis: { type: 'value' }, // 数据 series: [{ name: '销量', type: 'bar', data: value, itemStyle: { normal: { label: { show: true, //开启显示 position: 'top', //在上方显示 textStyle: { //数值样式 color: 'black', fontSize: 16 } } } }, }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } </script> <% Class.forName("com.mysql.jdbc.Driver"); String url="jdbc:mysql://101.43.149.243:3306/test"; Connection con=DriverManager.getConnection(url,"guest","guest"); String sql="select * from logpvbyprovince order by num desc limit 10"; PreparedStatement pst=con.prepareCall(sql); ResultSet rs=pst.executeQuery(); %> <script type="text/javascript"> title=new Array(); value=new Array(); <% while(rs.next()){ %> title.push("<%=rs.getString(1)%>");value.push(<%=rs.getInt(2)%>); <% } rs.close(); pst.close(); con.close(); %> show(title,value); </script> </body> </html>改为用饼图展示

好的，我来为您改写代码，展示用饼图展示前10名省份的数据：

<%@page pageEncoding="UTF-8" import="java.sql.*"%>
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<title>饼图显示数值</title>
</head>
<body style="height:600px; margin: 0">
<div id="main" style="width: 800px;height:80%;"></div>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script>
function show(title,value){
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
title: {
text: '前10名省份饼图',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 10,
data: title
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: value
}
]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
</script>
<%
Class.forName("com.mysql.jdbc.Driver");
String url="jdbc:mysql://101.43.149.243:3306/test";
Connection con=DriverManager.getConnection(url,"guest","guest");
String sql="select * from logpvbyprovince order by num desc limit 10";
PreparedStatement pst=con.prepareCall(sql);
ResultSet rs=pst.executeQuery();
%>
<script type="text/javascript">
var title = new Array();
var value = new Array();
<% while(rs.next()){ %>
title.push("<%=rs.getString(1)%>");
value.push({value:<%=rs.getInt(2)%>, name:"<%=rs.getString(1)%>"});
<% } %>
rs.close();
pst.close();
con.close();
show(title, value);
</script>
</body>
</html>

希望这可以帮助您展示饼图。