ECharts实现动态切换主题样式

ECharts是百度开源的一个JS数据可视化库。通过颜色主题可以轻松实现不同颜色样式的修改，也可以通过调色盘、直接样式设置、高亮样式等方法实现。

ECharts4 开始，除了一贯的默认主题外，新内置了两套主题，分别为 'light' 和 'dark'。使用方法如下：

var chart = echarts.init(dom, 'light');

主题可以在主题编辑器里面找到，也可以自己定义主题。如果主题保存为 JSON 文件，那么可以自行加载和注册（参考文档）。

动态修改主题方法如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts主题样式</title>
    <!-- 引入 echarts.js -->
    <script src="./dist/echarts.min.js"></script>
</head>
<body>

    <!--切换主题按钮-->
    <div>
        <h5>利用主题实现，默认有二种，也可自定义主题，或者利用官网提供的主题工具实现</h5>
        <input type="button" value="light" οnclick="setLigth()">
        <input type="button" value="dark" οnclick="setDark()">
    </div>
    <div>
        <h5>调色板，修改默认的样式颜色</h5>
        <input type="button" value="颜色修改" οnclick="setColor()">
    </div>
    <div>
        <h5>直接的样式设置 itemStyle, lineStyle, areaStyle, label等</h5>
        <h5>高亮的样式：emphasis</h5>>
    </div>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>

    <div>
        <a href="https://www.echartsjs.com/zh/tutorial.html#ECharts%20%E4%B8%AD%E7%9A%84%E6%A0%B7%E5%BC%8F%E7%AE%80%E4%BB%8B">参考文档</a>
    </div>
    
</body>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        series: [{
            name: '销量',
            type: 'pie',
            data: [
            {value: 335, name: '直接访问'},
            {value: 310, name: '邮件营销'},
            {value: 274, name: '联盟广告'},
            {value: 235, name: '视频广告'},
            {value: 400, name: '搜索引擎'}
        ].sort(function (a, b) { return a.value - b.value; })
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    
    //动态切换主题
    function setLigth()
    {
        myChart.dispose();  
        myChart = echarts.init(document.getElementById('main'), 'light');
        myChart.setOption(option);
    }

    function setDark()
    {
        myChart.dispose();
        myChart = echarts.init(document.getElementById('main'), 'dark');
        myChart.setOption(option);
    }
    //设置调色板样色
    function setColor()
    {
        let rcolor = [];
        for (let i = 0; i <  10; ++i)
        {
            //随机一个样色
            rcolor.push("#"+Math.round(Math.random()*0x1000000).toString(16));
        }
        let tmpoption = {
            color: rcolor
        };

        myChart.setOption(tmpoption);
    }

</script>

</html>

缘如风

发布了85 篇原创文章 · 获赞 34 · 访问量 14万+

私信关注

ECharts实现动态切换主题样式

猜你喜欢