Echarts可视化教程（十五）—— 大屏可视化

最新推荐文章于 2024-05-07 03:37:24 发布

sjskskjj

最新推荐文章于 2024-05-07 03:37:24 发布

阅读量815

点赞数 7

文章标签： echarts

本文链接：https://blog.csdn.net/sjskskjj/article/details/134672013

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
	<script type="text/JavaScript" src="../static/echarts.min.js"></script>
    <script type="text/JavaScript" src="../static/echarts-wordcloud.min.js"></script>
     <link rel="stylesheet" type="text/css" href="../static/main.css">
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="title">
        中美两国综合国力对比
    </div>
    <div id="up">
        <div id="up-left">

        </div>
        <div id="up-middle">

        </div>
        <div id="up-right">

        </div>
    </div>

    <script type="text/javascript">
    //中间大图
var myChart = echarts.init(document.getElementById('up-middle'));
myChart.setOption({
    grid:{
        width:"65%"
    },
    title : {
        x:"20%",
        text : "人口、人均GDP、GDP总量增长清空"//标题
    },
    tooltip : {
    },
    legend: {
        x:"80%",
        y:15,
        orient:"vertical",
        data:['中国总人口（百万）', '美国总人口（百万）', '中国GDP总量（亿美元）', '美国GDP总量（亿美元）', '中国人均GDP（美元）', '美国人均GDP（美元）']//图例
    },
    xAxis : [
      {
          name: "年份",
          type : 'category',//表示x轴的每一项由几组数据组成
          data : ['1980','1985','1990','1995','2000','2005','2010','2015', '2020']//x轴标题
      }
    ],
    yAxis : [
      {
          type : 'value'//每一项都是数据
      }
    ],
    series : [
         {
             /********* Begin *********/
                stack:'1',
                name:"中国总人口（百万）",
                type:'bar',

             /********* End *********/
             itemStyle : { color:'rgb(252,144,115)'},//柱子样式
             data:[98100,105100,113500,120500, 126300, 130400,133800, 137100, 140200]//数据
         },
         {
             /********* Begin *********/
            stack:'1',
                name:"美国总人口（百万）",
                type:'bar',

             /********* End *********/
             itemStyle : { color:'rgb(187,230,115)'},//柱子样式
             data:[22900,24000,25200,26600, 28200, 29600,30900, 32100, 33200]
         },
         {
             name:'中国人均GDP（美元）',//数据的名字
             type:'line',//表示柱状图
             itemStyle : { color:'rgb(118,102,79)', normal: {label : {show: true}}},//柱子样式
             data:[194, 294, 317, 609, 959, 1753, 4550, 8066, 10500]//数据
         },
         {
             name:'美国人均GDP（美元）',
             type:'line',
             itemStyle : { color:'rgb(67,74,80)', normal: {label : {show: true}}},//柱子样式
             data:[12574, 18236, 23888, 28690, 36334, 44114, 48466, 56863, 63543]
         },
         {
             name:'中国GDP总量（亿美元）',//数据的名字
             type:'line',//表示柱状图
             itemStyle : { color:'rgb(60,46,123)', normal: {label : {show: true}}},//柱子样式
             data:[1911, 3094, 3608, 7345, 12113, 22859, 60871, 110616, 147227]//数据
         },
         {
             name:'美国GDP总量（亿美元）',
             type:'line',
             itemStyle : { color:'rgb(8,117,78)', normal: {label : {show: true}}},//柱子样式
             data:[28573, 43389, 59631, 76397, 102523, 130366, 149921, 182383, 209366]
         },
    ]
});
    //左侧
    var myChart = echarts.init(document.getElementById('up-left'));
    myChart.setOption({
        grid:{
            width:"85%"
        },
        title : {
            x:"2%",
            text : "世界五百强企业数量对比（2020）"//标题
        },
        tooltip : {
        },
        color:["rgb(178,94,70)", "rgb(9,163,65)"],
        legend: {
            x:"80%",
            y:20,
            orient:"vertical",
            data:['中国', '美国']//图例
        },
        series : [
             {
                 name:'世界五百强企业数量',//数据的名字
                 type:'pie',//表示柱状图
                 radius:'60%',//圆的半径
                 itemStyle : {normal: {label : {show: true}}},
                 /********* Begin *********/
                data:[{value:124,name:'中国'},{value:121,name:'美国'}]

                 /********* End *********/
             }
        ]
    });
 //右侧
var myChart = echarts.init(document.getElementById('up-right'));
myChart.setOption({
    grid:{
        width:"95%"
    },
    title : {
        x:"12%",
        text : "中美军力对比（2020）"//标题
    },
    tooltip : {
    },
    color:["rgb(237,223,174)", "rgb(9,163,65)"],
    legend: {
        x:"80%",
        y:20,
        orient:"vertical",
        data:['中国', '美国']//图例
    },
    radar: [{  //配置雷达图坐标系组件，只适用于雷达图
        center: ['50%', '56%'],  //设置中心坐标，数组的第1项是横坐标，第2项是纵坐标
        radius: '60%',  //设置圆的半径，数组的第一项是内半径，第二项是外半径
        name: {  //设置（圆外的标签）雷达图每个指示器名称
            formatter: '{value}',
            textStyle: {color: '#000' }
        },
        splitNumber: 2,  //设置指示器轴的分割段数，default
        //设置坐标轴轴线设置
        axisLine: { lineStyle: { color: '#fff', width: 1, type: 'solid', } },
        //设置坐标轴在grid区域中的分隔线
        splitLine: { lineStyle: { color: '#fff', width: 1, } },
        splitArea: {
            show: true,
            areaStyle: { color: ['#abc', '#abc', '#abc', '#abc'] }
        },  //设置分隔区域的样式
        indicator: [  //配置雷达图指示器，指定雷达图中的多个变量，跟data中value对应
            //设置指示器的名称，最大值，标签的颜色
            { name: '军费开支', max: 10300 },
             { name: '军队数量', max: 340 },
            { name: '航母数量', max: 14 },
             { name: '五代机数量', max: 400 },
            { name: '洲际导弹数量', max: 4100 }]
    }],
    series: [{
        name: '雷达图',  //系列名称，用于tooltip的显示，图例筛选
        type: 'radar',  //系列类型: 雷达图
        data: [  //设置雷达图的数据是多变量(维度)
            {   //设置第1个数据项
                name: '中国',  //数据项名称
                value: [2520, 200, 3, 150, 350],  //value是具体数据
                symbol: 'triangle',
                //设置拐点标志样式
                itemStyle: { normal: { borderColor: 'blue', borderWidth: 3 } },
            },
            {   //设置第2个数据项
                name: '美国',
                value: [7780, 140, 11, 250, 3750],
                symbol: 'circle',
                //设置拐点标志样式
                itemStyle: { normal: { borderColor: 'rgba(51,0,255,1)', borderWidth: 3, } },
            }
        ]
    },]
});
    </script>
</body>
</html>