【无标题】

最新推荐文章于 2024-07-24 11:09:48 发布

Doryh

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量277

点赞数 5

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/Doryh1010/article/details/137764455

版权

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.08;
       // ctx.font = '30px Microsoft Yahei'; // 设置水印文字的字体
       // ctx.translate(50, 50); // 设置水印文字的偏转值
       // ctx.rotate(-Math.PI / 4); // 设置水印旋转的角度
       // ctx.fillText(waterMarkText, 0, 0); // 设置填充水印

1）分别设置每个BCW用对象为相同的gop值,并通过在调用EChats对象的comne方法时，传入gmoup值，从而使用多个EChars 对象建立联动关

myChart1.group = 'group1';
myChart2.group = 'group1';
echarts.connect('group1');
// 多图表联动配置方法2：直接传入需要联动的echarts对象myChart1，myChart2
//echarts.connect([myChart1,myChart2]);

(2)直接调用 EChars的 connect方法，参数为一个由多个需要联动的 EChans对象组成的数组
// 多图表联动配置方法2：直接传入需要联动的echarts对象myChart1，myChart2
echarts.connect([myChart1,myChart2])


<!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>
</head>
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM--->
    <div id="main1" style="width: 700px; height: 400px"></div>
    <div id="main2" style="width: 700px; height: 400px"></div>
    <script type="text/javascript">
    //指定图表的配置项和数据
    //基于准备好的dom，初始化ECharts图表
    var myChart1 = echarts.init(document.getElementById("main1"));
    var waterMarkText = ' ECharts';
			var canvas = document.createElement('canvas');
			var ctx = canvas.getContext('2d');
			canvas.width = canvas.height = 100;
			ctx.textAlign = 'center';
			ctx.textBaseline = 'middle';
			ctx.globalAlpha = 0.08;
			ctx.font = '20px Microsoft Yahei';
			ctx.translate(50,50);
			ctx.rotate(-Math.PI / 4);
			ctx.fillText(waterMarkText, 0, 0);
			var option1 = {
				backgroundColor:{type:'pattern',image:canvas,repeat:'repeat'},
        color: ['LimeGreen',' DarkGreen', 'red', 'blue', 'Purple'],
        backgroundColor: 'rgba(128,128,128,0.1)',  //rgba设置透明度为0.1
        title: { text: 'NBA2K 贾.莫兰特', },
        tooltip: { toolip: { show: true }, },
        radar: {
            // shape: 'circle',
            indicator: [
            
            { name: '运动', max: 100 },
            { name: '抢断', max: 100 },
            { name: '外防', max: 100 },
            { name: '内防', max: 100 },
            { name: '组织', max: 100 },
            { name: '三分', max: 100 },
            { name: '中投', max: 100 },
            { name: '背身', max: 100 },
            { name: '篮下', max: 100 },
            { name: '突破', max: 100 },
            ]
        },
        series: [{     //配置第1个图表的数据系列
            name: '2019年榜眼',
            type: 'radar',   //设置柱状图中每个柱子的宽度
            data: [{
                value: [99, 56, 55, 30,96,80,93,30,30,97],
                name: '贾.莫兰特'
        }],
        }]
    };
    //基于准备好的dom，初始化ECharts图表
    var myChart2 = echarts.init(document.getElementById("main2"));
    var option2 = {   //指定第2个图表的配置项和数据
        color: ['blue',' LimeGreen', 'Darkgreen', 'red', 'Purple'],
        backgroundColor: 'rgba(128,128,128,0.1)',  //rgba设置透明度为0.1
        title: { text: '场均数据分析', },
        tooltip: { toolip: { show: true }, },
        radar: {
            // shape: 'circle',
            indicator: [
            { name: '得分', max: 100 },
            { name: '抢断', max: 150 },
            { name: '助攻', max: 100 },
            { name: '篮板', max: 300 },
            { name: '失误', max: 600 },
            ]
        },
        series: [{     //配置第1个图表的数据系列
            name: '2019年榜眼',
            type: 'radar',   //设置柱状图中每个柱子的宽度
            data: [{
                value: [95.50, 80.50, 70.00, 91.25, 78.00],
                name: '莫兰特'
        }],
        }]
    };
    myChart1.setOption(option1);   //为mychart1对象加载数据
    myChart2.setOption(option2);   //为mychart2对象加载数据
    //多图表联动配置方法1：分别设置每个ECharts对象的group值
    myChart1.group = 'group1';
    myChart2.group = 'group1';
    echarts.connect('group1');
</script>
</body>
</html>