jspecharts柱状图切换饼图

如何使用jspecharts实现柱状图切换饼图呢？

首先要引入jspecharts插件并初始化一个ECharts图表：

<!-- 引入jspecharts插件 -->
<script src="./jspecharts.js"></script>
<script>
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('myChart'));
</script>

接下来，我们需要定义一个数据对象，该对象包含了柱状图以及饼图所需的数据。例如：

var data = {
    // 柱状图数据
    bar: {
        // x轴数据
        xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        // y轴数据
        yData: [120, 200, 150, 80, 70, 110, 130],
        // 标题
        title: '柱状图示例'
    },
    // 饼图数据
    pie: {
        // 图例数据
        legendData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        // 数据
        data: [
            { value: 120, name: 'Mon' },
            { value: 200, name: 'Tue' },
            { value: 150, name: 'Wed' },
            { value: 80, name: 'Thu' },
            { value: 70, name: 'Fri' },
            { value: 110, name: 'Sat' },
            { value: 130, name: 'Sun' }
        ],
        // 标题
        title: '饼图示例'
    }
};

接下来，定义一个变量来表示当前图表的类型，例如：

var curType = 'bar'; // 当前类型为柱状图

接着，我们需要编写一个函数用来切换图表类型：

function toggleChart() {
    // 判断当前图表类型
    if (curType === 'bar') {
        // 切换为饼图
        myChart.setOption(JSP_ECharts.createPieChart(data.pie));
        // 更新当前类型
        curType = 'pie';
    } else {
        // 切换为柱状图
        myChart.setOption(JSP_ECharts.createBarChart(data.bar));
        // 更新当前类型
        curType = 'bar';
    }
}

最后，在HTML中给一个按钮添加onclick事件，调用toggleChart函数，实现图表类型的切换：

<button onclick="toggleChart()">切换图表类型</button>

至此，我们就可以通过使用jspecharts实现柱状图和饼图的切换了。