echarts-同一画布绘制多张图表

最新推荐文章于 2024-05-22 10:05:28 发布

原创最新推荐文章于 2024-05-22 10:05:28 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #echarts

本文详细介绍了如何使用ECharts在同一个canvas元素中绘制多张图表，包括配置项设置、数据同步、交互事件处理等方面的技巧，帮助开发者实现更高效的数据展示。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>myProject</title>
    <!-- 引入 lib/echarts.custom.min.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;border:3px solid red"></div>
    <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
        xAxis: {data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']},
        yAxis: {},
        series: [{type: 'pie', center: ['70%', '20%'], radius: 35, data: [
                        {name: 'XX', value: 52},
                        {name: 'YY', value: 67},
                        {name: 'ZZ', value: 100}]},
                {type: 'line', data:[34,28,45,69,39,43,33,23,44,33,39,22]},
                {type: 'bar',data:[20,14,32,46,24,23,23,13,16,20,24,15]},]
    }//多张图表
    myChart.setOption(option);
    </script>
</body>
</html>