一个div多个图表共用一个图例

最新推荐文章于 2022-08-24 21:43:18 发布

bagu1904

最新推荐文章于 2022-08-24 21:43:18 发布

阅读量1.4k

点赞数

文章标签： javascript r语言 json ViewUI

原文链接：http://www.cnblogs.com/huchong-bk/p/11558573.html

版权

本文介绍如何在JavaScript中实现一个div内多个图表共用同一个图例，通过点击图例切换不同图表的数据展示。内容涉及图表的标题设置、datazoom区域以及主题切换。在编码过程中，需要注意图表布局、datazoom的对应、以及动态更新图表时的主题渲染问题。作者建议先在官方文档上验证可行性，再进行实际编码。

摘要由CSDN通过智能技术生成

想实现一个图例（公司名），点击让div中三个图表进行显示相应的数据，并渲染到图表中（公司数据可能很多，让其默认显示三条数据），并且每个图表都有相应的标题和datazoom区域展示，点击下拉框会进行相应的数据进行渲染和主题切换

话不多说，放上效果图和代码供参考

有些代码里的方法是直接套用上一个里面的，有兴趣的可以去看看图表实战的其他内容，

可能注释有些不完整，参考其他内容里面的js插件

<!-- 产能 产量 开工率 仓储 -->

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/getParam.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/dark.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/macarons.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/wonderland.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/purple-passion.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/chalk.js" type="text/javascript" charset="utf-8"></script>
        <title></title>
        <style type="text/css">
            /* #main1{
            /* background: #FF0000; */
            /* display: inline-block; */
            /* margin-left: 12%; */
            /* margin-top: 40px; */
            /* } */
            #main2 {
     
                /* background: #000000; */
                display: inline-block;
                margin-right: 12%;
                margin-left: 12%;
            }

            #main3 {
     
                display: inline-block;
                background: #008000;
                margin-left: 12%;
                margin-top: 40px;
            }

            #main4 {
     
                background: #808080;
                display: inline-block;
                margin-right: 12%;
                margin-left: 12%;
            }
        </style>
    </head>
    <body>
        <div>
            <select id="sel">
                <option value="macarons">macarons</option>
                <option value="dark">dark</option>
                <option value="wonderland">wonderland</option>
                <option value="chalk">chalk</option>
                <option value="purple-passion">purple-passion</option>
            </select>

            <select id="region">
                <option value="all">全部</option>
            </select>
        </div>


        <div id="main" style="width: 100%; height: 600px;"></div>
        <!-- <div id="main2" style="width: 30%; height: 300px;"></div>
    <div id="main3" style="width: 30%; height: 300px;"></div>
    <div id="main4" style="width: 30%; height: 300px;"></div> -->
        <script type="text/javascript">
            function load() {
                var myChart =

最低0.47元/天解锁文章

bagu1904

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
一个div多个图表共用一个图例

想实现一个图例（公司名），点击让div中三个图表进行显示相应的数据，并渲染到图表中（公司数据可能很多，让其默认显示三条数据），并且每个图表都有相应的标题和datazoom区域展示，点击下拉框会进行相应的数据进行渲染和主题切换话不多说，放上效果图和代码供参考有些代码里的方法是直接套用上一个里面的，有兴趣的可以去看看图表实战的其他内容，可能注释有些不完整，参考其他内容...
复制链接

扫一扫