Echarts实训混搭图表之动态切换主题

小智张

已于 2024-04-15 10:46:37 修改

阅读量315

点赞数 1

文章标签： echarts 前端 javascript

于 2024-04-15 09:14:10 首次发布

本文链接：https://blog.csdn.net/2301_77751917/article/details/137765727

版权

图表混搭会使得图表更具表现力、也更有趣味。 ECharts 提供的图表 支持任意图表的混搭 ，其中以折线图与柱状图的混搭最为常见，折线图与饼状图的混搭也时有所见。

ECharts是一款原生js写的图表类库，ECharts为打造一款数据可视化平台提供了良好的图表支持。百度Echarts团队提供了几种风格的主题。切换Echarts4.x主题的三个步骤：

第1步：下载主题文件。在使用主题之前需要下载主题.js文件(在ECharts官网上下载官方提供的主题，如：macarons.js，或者自定义主题)，下载地址：https://www.echartsjs.com/zh/download-theme. html。如图6‑5所示。
第2步：引用主题文件。将下载得到的主题.js文件引用到HTML页面中。注意，如果ECharts主题中需要使用到jquery，则还应该再在页面中引用jquery的.js文件。
第3步：指定主题名。ECharts对象初始化时，通过第2个参数来指定第2步所引入的主题名。如：var myChart = echarts.init(document.getElementById('main'),主题名) 。

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/echarts.js"></script>
    <script src="js/infographic.js"> </script>
    <script src="js/macarons.js"> </script>
    <script src="js/jquery-3.3.1.js"> </script>
    <script src="js/dark.js"> </script>
    <!-- <script src="js/echarts521.js"> </script> -->
</head>
<body>
    <div id="themeArea"><label>ECharts 主题切换：</label></div>
    <div>
        <select name="you select theme:" id="selection">
            <option value="infographic">infographic</option>
            <option value="macarons">macarons</option>
            <option value="jquery-3.3.1">jquery-3.3.1</option>
            <option value="dark">dark</option>
            <!-- <option value="echarts521">echarts521</option> -->
        </select>
    </div>
</body>

效果图：

设置水印：

var myChart = echarts.init(document.getElementById("main"));
        var waterMarkText = '小智张'; // 设置水印的字符
		var canvas = document.createElement('canvas');
		var ctx = canvas.getContext('2d');
		canvas.width = canvas.height = 100;
		ctx.textAlign = 'center';
		ctx.textBaseline = 'middle';
        ctx.globalAlpha = 0.36,//水印颜色
		ctx.globalAlpha = 10;
		ctx.font = '8px Microsoft Yahei'; // 设置水印文字的字体
		ctx.translate(60, 60); // 设置水印文字的偏转值
		ctx.rotate(-Math.PI / 4); // 设置水印旋转的角度
		ctx.fillText(waterMarkText, 0, 0); // 设置填充水印

在数据中的 series 数组中，通过代码 yAxisIndex:1 ，来指定使用第 2 个 y 轴（ 0 代表第 1 个 y 轴， 1 代表第 2 个 y 轴）。

 {
                name: '温度',
                type: 'line',
                yAxisIndex: 1,
                tooltip: {
                    valueFormatter: function (value) {
                    return value + ' °C';
                    }
                },
                data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                }

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/echarts.js"></script>
    <script src="js/infographic.js"> </script>
    <script src="js/macarons.js"> </script>
    <script src="js/jquery-3.3.1.js"> </script>
    <script src="js/dark.js"> </script>
    <!-- <script src="js/echarts521.js"> </script> -->
</head>
<body>
    <div id="themeArea"><label>ECharts 主题切换：</label></div>
    <div>
        <select name="you select theme:" id="selection">
            <option value="infographic">infographic</option>
            <option value="macarons">macarons</option>
            <option value="jquery-3.3.1">jquery-3.3.1</option>
            <option value="dark">dark</option>
            <!-- <option value="echarts521">echarts521</option> -->
        </select>
    </div>
    <div id="main" style="width: 600px;height:400px;background-color:#00FFFF ;"></div>
    <script type="text/javascript">
		//基于准备好的dom，初始化ECharts图表
		var myChart = echarts.init(document.getElementById("main"));
        var waterMarkText = '小智张'; // 设置水印的字符
		var canvas = document.createElement('canvas');
		var ctx = canvas.getContext('2d');
		canvas.width = canvas.height = 100;
		ctx.textAlign = 'center';
		ctx.textBaseline = 'middle';
        ctx.globalAlpha = 0.36,//水印颜色
		ctx.globalAlpha = 10;
		ctx.font = '8px Microsoft Yahei'; // 设置水印文字的字体
		ctx.translate(60, 60); // 设置水印文字的偏转值
		ctx.rotate(-Math.PI / 4); // 设置水印旋转的角度
		ctx.fillText(waterMarkText, 0, 0); // 设置填充水印
		var option = {  //指定图表的配置项和数据
            backgroundColor: {type:'patten',image:canvas,repeat:'repeat'},
            title:{
                text:'气候温度与降水量蒸发量的关系',
                textStyle:{
                    color:'pink',
                },
                x:'center',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
                }
            },
            toolbox: {
                feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
                }
            },
            legend: {
                top:'30,30',
                data: ['蒸发量', '降水量', '温度']
            },
            xAxis: [
                {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月'],
                axisPointer: {
                    type: 'shadow'
                }
                }
            ],
            yAxis: [
                {
                type: 'value',
                name: '降水量',
                min: 0,
                max: 250,
                interval: 50,
                axisLabel: {
                    formatter: '{value} ml'
                }
                },
                {
                type: 'value',
                name: '温度',
                min: 0,
                max: 25,
                interval: 5,
                axisLabel: {
                    formatter: '{value} °C'
                }
                }
            ],
            series: [
                {
                name: '蒸发量',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                    return value + ' ml';
                    }
                },
                data: [
                    2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
                ]
                },
                {
                name: '降水量',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                    return value + ' ml';
                    }
                },
                data: [
                    2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
                ]
                },
                {
                name: '温度',
                type: 'line',
                yAxisIndex: 1,
                tooltip: {
                    valueFormatter: function (value) {
                    return value + ' °C';
                    }
                },
                data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                }
            ]
    };
    myChart.setOption(option);
    $('#selection').change(function(){
        myChart.dispose();
        let yourtheme = $(this).val();
        myChart = echarts.init(document.getElementById('main'),yourtheme);
        myChart.setOption(option);
        myChart.resize();
    });
    </script>
</body>
</html>