zoukankan      html  css  js  c++  java
  • echarts4 主题切换

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Echarts Theme Switch</title>
        <script src="./js/jquery.min.js"></script>
        <script src="./js/echarts.js" type="text/javascript" charset="utf-8"></script>
        <script src = './js/theme/dark.js'></script>
        <script src = './js/theme/macarons.js'></script>
    </head>
    <body>
    <select name="" id="sel">
        <option value="dark">dark</option>
        <option value="macarons">macarons</option>
    </select>
    <button id = 'clear'>clear</button>
    <div id = 'zhuzhuangtu' style="height:399px;"></div>
    </body>
    </html>
    <script>
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('zhuzhuangtu'),'dark');
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            grid:{
                show:true,
                backgroundColor:'black'
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
    
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        $('#sel').change(function(){
            myChart.dispose();
            let Theme = $(this).val();
            // 基于准备好的dom,初始化echarts实例
            myChart = echarts.init(document.getElementById('zhuzhuangtu'),Theme);
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        });
    </script>

    主题什么的在线资源没找到,自行下载吧

  • 相关阅读:
    Numpy存字符串
    一个类似于postman的协议测试工具
    freetds设置超时
    学习jQuery
    webpy 使用python3开发
    gdb调试coredump文件
    htop和ncdu
    rqalpha-自动量化交易系统(一)
    perl学习-运算符添加引号
    xss 和 csrf攻击详解
  • 原文地址:https://www.cnblogs.com/aiyr/p/8375831.html
Copyright © 2011-2022 走看看