AI 助理
备案控制台
开发者社区 云计算 文章 正文

echart渐变折线图，立体柱状图，发光饼图，月份图等

2023-06-07 88
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： echart渐变折线图，立体柱状图，发光饼图，月份图等 


<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id=main style="height: 900px;width: 900px;"></div>
    <script src="./js/echarts.js"></script>
    <script src="./js/jquery-3.5.1.js"></script>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        var fontColor = '#30eee9';
        option = {
            backgroundColor: '#11183c',
            grid: {
                left: '5%',
                right: '10%',
                top: '20%',
                bottom: '15%',
                containLabel: true
            },
            tooltip: {
                show: true,
                trigger: 'item'
            },
            legend: {
                show: true,
                x: 'center',
                y: '35',
                icon: 'stack',
                itemWidth: 10,
                itemHeight: 10,
                textStyle: {
                    color: '#1bb4f6'
                },
                data: ['已采纳', '已发布', '浏览量']
            },
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                    color: fontColor
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#397cbc'
                    }
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#195384'
                    }
                },
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            }],
            yAxis: [{
                type: 'value',
                name: '信息量',
                min: 0,
                max: 1000,
                axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                        color: '#2ad1d2'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#27b4c2'
                    }
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#11366e'
                    }
                }
            }, {
                type: 'value',
                name: '浏览量',
                min: 0,
                max: 1000,
                axisLabel: {
                    formatter: '{value} 人',
                    textStyle: {
                        color: '#186afe'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#186afe'
                    }
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#11366e'
                    }
                }
            }],
            series: [{
                name: '已采纳',
                type: 'line',
                stack: '总量',
                symbol: 'circle',
                symbolSize: 8,
                itemStyle: {
                    normal: {
                        color: '#0092f6',
                        lineStyle: {
                            color: "#0092f6",
                            width: 1
                        },
                        areaStyle: {
                            //color: '#94C9EC'
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: 'rgba(7,44,90,0.3)'
                            }, {
                                offset: 1,
                                color: 'rgba(0,146,246,0.9)'
                            }]),
                        }
                    }
                },
                markPoint: {
                    itemStyle: {
                        normal: {
                            color: 'red'
                        }
                    }
                },
                data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330]
            }, {
                name: '已发布',
                type: 'line',
                stack: '总量',
                symbol: 'circle',
                symbolSize: 8,
                itemStyle: {
                    normal: {
                        color: '#00d4c7',
                        lineStyle: {
                            color: "#00d4c7",
                            width: 1
                        },
                        areaStyle: {
                            //color: '#94C9EC'
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: 'rgba(7,44,90,0.3)'
                            }, {
                                offset: 1,
                                color: 'rgba(0,212,199,0.9)'
                            }]),
                        }
                    }
                },
                data: [220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410]
            }, {
                name: '浏览量',
                type: 'line',
                stack: '总量',
                symbol: 'circle',
                symbolSize: 8,
                itemStyle: {
                    normal: {
                        color: '#aecb56',
                        lineStyle: {
                            color: "#aecb56",
                            width: 1
                        },
                        areaStyle: {
                            //color: '#94C9EC'
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: 'rgba(7,44,90,0.3)'
                            }, {
                                offset: 1,
                                color: 'rgba(114,144,89,0.9)'
                            }]),
                        }
                    }
                },
                data: [150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190]
            }]
        };
        myChart.setOption(option);
    </script>
</body>
</html>




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="main" style="width: 800px;height:800px;"></div>
    <script src="./js/jquery-3.5.1.js"></script>
    <script src="./js/echarts.js"></script>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        var scaleData = [{
                'name': '工程建设',
                'value': 10
            }, {
                'name': '产权交易',
                'value': 10
            }, {
                'name': '土地交易',
                'value': 10
            }, {
                'name': '其他交易',
                'value': 10
            }, {
                'name': '土地交易',
                'value': 10
            }, {
                'name': '其他交易',
                'value': 10
            },
        ];
        var rich = {
            white: {
                color: '#ddd',
                align: 'center',
                padding: [3, 0]
            }
        };
        var placeHolderStyle = {
            normal: {
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0
            }
        };
        var data = [];
        var color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
        for (var i = 0; i < scaleData.length; i++) {
            data.push({
                value: scaleData[i].value,
                name: scaleData[i].name,
                itemStyle: {
                    normal: {
                        borderWidth: 4,
                        shadowBlur: 200,
                        borderColor: color[i],
                        shadowColor: color[i]
                    }
                }
            }, {
                value: 2,
                name: '',
                itemStyle: placeHolderStyle
            });
        }
        var seriesObj = [{
            name: '',
            type: 'pie',
            clockWise: false,
            radius: [100, 200],
            hoverAnimation: false,
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        position: 'outside',
                        color: '#ddd',
                        formatter: function(params) {
                            var percent = 0;
                            var total = 0;
                            for (var i = 0; i < scaleData.length; i++) {
                                total += scaleData[i].value;
                            }
                            percent = ((params.value / total) * 100).toFixed(0);
                            if (params.name !== '') {
                                return params.name + '\n{white|' + '占比' + percent + '%}';
                            } else {
                                return '';
                            }
                        },
                        rich: rich
                    },
                    labelLine: {
                        length: 30,
                        length2: 100,
                        show: true,
                        color: '#00ffff'
                    }
                }
            },
            data: data
        }];
        option = {
            backgroundColor: '#04243E',
            tooltip: {
                show: false
            },
            legend: {
                show: false
            },
            toolbox: {
                show: false
            },
            series: seriesObj
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>




<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id=main style="height: 600px;width: 600px;"></div>
    <script src="./js/echarts.js"></script>
    <script src="./js/jquery-3.5.1.js"></script>
    <script src="./js/bmap.js"></script>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        var xData = ["2020-01", "2020-02", "2020-03", "2020-04", "2020-05", "2020-06"]
        var line = ["1030", "205", "84", "568", "689", "4587"];
        var attr = {
                'name': '月平均单价',
                'unit': '元/单'
            }
            // var graphicData = ["A级:1000-10000元/人",
            // "B级:10000-100000元/人",
            // "C级:100000-10000000元/人",
            // ];
        var colors = []
        option = {
            tooltip: {
                trigger: 'item',
                padding: 1,
                formatter: function(param) {
                    var resultTooltip =
                        "<div style='background:rgba(13,5,30,.6);border:1px solid rgba(255,255,255,.2);padding:5px;border-radius:3px;'>" +
                        "<div style='text-align:center;'>" + param.name + "</div>" +
                        "<div style='padding-top:5px;'>" +
                        "<span style=''> " + attr.name + ": </span>" +
                        "<span style=''>" + param.value + "</span><span>" + attr.unit + "</span>" +
                        "</div>" +
                        "</div>";
                    return resultTooltip
                }
            },
            // graphic: [{
            //     type: 'text',
            //     z: 100,
            //     right: '4%',
            //     top: '8%',
            //     style: {
            //         fill: '#81A5E8',
            //         text: graphicData.join('\n'),
            //         padding:[20,20],
            //         font: 'italic small-caps  18px/2 cursive',
            //     }
            // }],
            grid: {
                left: '5%',
                top: '10%',
                right: '5%',
                bottom: '10%',
            },
            legend: {
                show: true,
                icon: 'circle',
                orient: 'horizontal',
                top: '90.5%',
                right: 'center',
                itemWidth: 16.5,
                itemHeight: 6,
                // itemGap: 30,
                textStyle: {
                    // color: '#FFFFFF'
                    color: '#C9C8CD',
                    fontSize: 14
                }
            },
            xAxis: [{
                data: xData,
                axisLabel: {
                    textStyle: {
                        color: '#aaaaaa',
                        fontSize: 14
                    },
                    margin: 30, //刻度标签与轴线之间的距离。
                },
                axisLine: {
                    show: false //不显示x轴
                },
                axisTick: {
                    show: false //不显示刻度
                },
                boundaryGap: true,
                splitLine: {
                    show: false,
                    width: 0.08,
                    lineStyle: {
                        type: "solid",
                        color: "#03202E"
                    }
                }
            }],
            yAxis: [{
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#eee',
                        type: 'solid'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#888'
                    },
                }
            }],
            series: [{ //柱底圆片
                    name: "",
                    type: "pictorialBar",
                    symbolSize: [60, 22], //调整截面形状
                    symbolOffset: [0, 10],
                    z: 12,
                    itemStyle: {
                        "normal": {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: "rgba(89,211,255,1)"
                            }, {
                                offset: 1,
                                color: "rgba(23,237,194,1)"
                            }])
                        }
                    },
                    data: line
                },
                //柱体
                {
                    name: '',
                    type: 'bar',
                    barWidth: 60,
                    barGap: '0%',
                    itemStyle: {
                        "normal": {
                            "color": {
                                "x": 0,
                                "y": 0,
                                "x2": 0,
                                "y2": 1,
                                "type": "linear",
                                "global": false,
                                "colorStops": [{ //第一节下面
                                    "offset": 0,
                                    "color": "rgba(0,255,245,0.5)"
                                }, {
                                    "offset": 1,
                                    "color": "#43bafe"
                                }]
                            }
                        }
                    },
                    data: line
                },
                //柱顶圆片
                {
                    name: "",
                    type: "pictorialBar",
                    symbolSize: [60, 22], //调整截面形状
                    symbolOffset: [0, -10],
                    z: 12,
                    symbolPosition: "end",
                    "itemStyle": {
                        "normal": {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: "rgba(89,211,255,1)"
                                }, {
                                    offset: 1,
                                    color: "rgba(23,237,194,1)"
                                }],
                                false
                            ),
                        }
                    },
                    data: line
                }
            ]
        };
        myChart.setOption(option);
    </script>
</body>
</html>





<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="main" style="width: 500px;height:500px;"></div>
    <script src="./js/jquery-3.5.1.js"></script>
    <script src="./js/echarts.js"></script>
    <script src="./js/bmap.js"></script>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        var dateList = [
            ['2017-1-1', '初四'],
            ['2017-1-2', '初五'],
            ['2017-1-3', '初六'],
            ['2017-1-4', '初七'],
            ['2017-1-5', '初八', '小寒'],
            ['2017-1-6', '初九'],
            ['2017-1-7', '初十'],
            ['2017-1-8', '十一'],
            ['2017-1-9', '十二'],
            ['2017-1-10', '十三'],
            ['2017-1-11', '十四'],
            ['2017-1-12', '十五'],
            ['2017-1-13', '十六'],
            ['2017-1-14', '十七'],
            ['2017-1-15', '十八'],
            ['2017-1-16', '十九'],
            ['2017-1-17', '二十'],
            ['2017-1-18', '廿一'],
            ['2017-1-19', '廿二'],
            ['2017-1-20', '廿三', '大寒'],
            ['2017-1-21', '廿四'],
            ['2017-1-22', '廿五'],
            ['2017-1-23', '廿六'],
            ['2017-1-24', '廿七'],
            ['2017-1-25', '廿八'],
            ['2017-1-26', '廿九'],
            ['2017-1-27', '三十'],
            ['2017-1-28', '正月'],
            ['2017-1-29', '初二'],
            ['2017-1-30', '初三'],
            ['2017-1-31', '初四'],
            ['2017-2-1', '初五'],
            ['2017-2-2', '初六'],
            ['2017-2-3', '初七', '立春'],
            ['2017-2-4', '初八'],
            ['2017-2-5', '初九'],
            ['2017-2-6', '初十'],
            ['2017-2-7', '十一'],
            ['2017-2-8', '十二'],
            ['2017-2-9', '十三'],
            ['2017-2-10', '十四'],
            ['2017-2-11', '十五'],
            ['2017-2-12', '十六'],
            ['2017-2-13', '十七'],
            ['2017-2-14', '十八'],
            ['2017-2-15', '十九'],
            ['2017-2-16', '二十'],
            ['2017-2-17', '廿一'],
            ['2017-2-18', '廿二', '雨水'],
            ['2017-2-19', '廿三'],
            ['2017-2-20', '廿四'],
            ['2017-2-21', '廿五'],
            ['2017-2-22', '廿六'],
            ['2017-2-23', '廿七'],
            ['2017-2-24', '廿八'],
            ['2017-2-25', '廿九'],
            ['2017-2-26', '二月'],
            ['2017-2-27', '初二'],
            ['2017-2-28', '初三'],
            ['2017-3-1', '初四'],
            ['2017-3-2', '初五'],
            ['2017-3-3', '初六'],
            ['2017-3-4', '初七'],
            ['2017-3-5', '初八', '驚蟄'],
            ['2017-3-6', '初九'],
            ['2017-3-7', '初十'],
            ['2017-3-8', '十一'],
            ['2017-3-9', '十二'],
            ['2017-3-10', '十三'],
            ['2017-3-11', '十四'],
            ['2017-3-12', '十五'],
            ['2017-3-13', '十六'],
            ['2017-3-14', '十七'],
            ['2017-3-15', '十八'],
            ['2017-3-16', '十九'],
            ['2017-3-17', '二十'],
            ['2017-3-18', '廿一'],
            ['2017-3-19', '廿二'],
            ['2017-3-20', '廿三', '春分'],
            ['2017-3-21', '廿四'],
            ['2017-3-22', '廿五'],
            ['2017-3-23', '廿六'],
            ['2017-3-24', '廿七'],
            ['2017-3-25', '廿八'],
            ['2017-3-26', '廿九'],
            ['2017-3-27', '三十'],
            ['2017-3-28', '三月'],
            ['2017-3-29', '初二'],
            ['2017-3-30', '初三'],
            ['2017-3-31', '初四'],
            ['2017-4-1', '初五'],
            ['2017-4-2', '初六'],
            ['2017-4-3', '初七'],
            ['2017-4-4', '初八', '清明'],
            ['2017-4-5', '初九'],
            ['2017-4-6', '初十'],
            ['2017-4-7', '十一'],
            ['2017-4-8', '十二'],
            ['2017-4-9', '十三'],
            ['2017-4-10', '十四'],
            ['2017-4-11', '十五'],
            ['2017-4-12', '十六'],
            ['2017-4-13', '十七'],
            ['2017-4-14', '十八'],
            ['2017-4-15', '十九'],
            ['2017-4-16', '二十'],
            ['2017-4-17', '廿一'],
            ['2017-4-18', '廿二'],
            ['2017-4-19', '廿三'],
            ['2017-4-20', '廿四', '穀雨'],
            ['2017-4-21', '廿五'],
            ['2017-4-22', '廿六'],
            ['2017-4-23', '廿七'],
            ['2017-4-24', '廿八'],
            ['2017-4-25', '廿九'],
            ['2017-4-26', '四月'],
            ['2017-4-27', '初二'],
            ['2017-4-28', '初三'],
            ['2017-4-29', '初四'],
            ['2017-4-30', '初五'],
            ['2017-5-1', '初六'],
            ['2017-5-2', '初七'],
            ['2017-5-3', '初八'],
            ['2017-5-4', '初九'],
            ['2017-5-5', '初十', '立夏'],
            ['2017-5-6', '十一'],
            ['2017-5-7', '十二'],
            ['2017-5-8', '十三'],
            ['2017-5-9', '十四'],
            ['2017-5-10', '十五'],
            ['2017-5-11', '十六'],
            ['2017-5-12', '十七'],
            ['2017-5-13', '十八'],
            ['2017-5-14', '十九'],
            ['2017-5-15', '二十'],
            ['2017-5-16', '廿一'],
            ['2017-5-17', '廿二'],
            ['2017-5-18', '廿三'],
            ['2017-5-19', '廿四'],
            ['2017-5-20', '廿五'],
            ['2017-5-21', '廿六', '小滿'],
            ['2017-5-22', '廿七'],
            ['2017-5-23', '廿八'],
            ['2017-5-24', '廿九'],
            ['2017-5-25', '三十'],
            ['2017-5-26', '五月'],
            ['2017-5-27', '初二'],
            ['2017-5-28', '初三'],
            ['2017-5-29', '初四'],
            ['2017-5-30', '初五'],
            ['2017-5-31', '初六'],
            ['2017-6-1', '初七'],
            ['2017-6-2', '初八'],
            ['2017-6-3', '初九'],
            ['2017-6-4', '初十'],
            ['2017-6-5', '十一', '芒種'],
            ['2017-6-6', '十二'],
            ['2017-6-7', '十三'],
            ['2017-6-8', '十四'],
            ['2017-6-9', '十五'],
            ['2017-6-10', '十六'],
            ['2017-6-11', '十七'],
            ['2017-6-12', '十八'],
            ['2017-6-13', '十九'],
            ['2017-6-14', '二十'],
            ['2017-6-15', '廿一'],
            ['2017-6-16', '廿二'],
            ['2017-6-17', '廿三'],
            ['2017-6-18', '廿四'],
            ['2017-6-19', '廿五'],
            ['2017-6-20', '廿六'],
            ['2017-6-21', '廿七', '夏至'],
            ['2017-6-22', '廿八'],
            ['2017-6-23', '廿九'],
            ['2017-6-24', '六月'],
            ['2017-6-25', '初二'],
            ['2017-6-26', '初三'],
            ['2017-6-27', '初四'],
            ['2017-6-28', '初五'],
            ['2017-6-29', '初六'],
            ['2017-6-30', '初七'],
            ['2017-7-1', '初八'],
            ['2017-7-2', '初九'],
            ['2017-7-3', '初十'],
            ['2017-7-4', '十一'],
            ['2017-7-5', '十二'],
            ['2017-7-6', '十三'],
            ['2017-7-7', '十四', '小暑'],
            ['2017-7-8', '十五'],
            ['2017-7-9', '十六'],
            ['2017-7-10', '十七'],
            ['2017-7-11', '十八'],
            ['2017-7-12', '十九'],
            ['2017-7-13', '二十'],
            ['2017-7-14', '廿一'],
            ['2017-7-15', '廿二'],
            ['2017-7-16', '廿三'],
            ['2017-7-17', '廿四'],
            ['2017-7-18', '廿五'],
            ['2017-7-19', '廿六'],
            ['2017-7-20', '廿七'],
            ['2017-7-21', '廿八'],
            ['2017-7-22', '廿九', '大暑'],
            ['2017-7-23', '閏六', ],
            ['2017-7-24', '初二'],
            ['2017-7-25', '初三'],
            ['2017-7-26', '初四'],
            ['2017-7-27', '初五'],
            ['2017-7-28', '初六'],
            ['2017-7-29', '初七'],
            ['2017-7-30', '初八'],
            ['2017-7-31', '初九'],
            ['2017-8-1', '初十'],
            ['2017-8-2', '十一'],
            ['2017-8-3', '十二'],
            ['2017-8-4', '十三'],
            ['2017-8-5', '十四'],
            ['2017-8-6', '十五'],
            ['2017-8-7', '十六', '立秋'],
            ['2017-8-8', '十七'],
            ['2017-8-9', '十八'],
            ['2017-8-10', '十九'],
            ['2017-8-11', '二十'],
            ['2017-8-12', '廿一'],
            ['2017-8-13', '廿二'],
            ['2017-8-14', '廿三'],
            ['2017-8-15', '廿四'],
            ['2017-8-16', '廿五'],
            ['2017-8-17', '廿六'],
            ['2017-8-18', '廿七'],
            ['2017-8-19', '廿八'],
            ['2017-8-20', '廿九'],
            ['2017-8-21', '三十'],
            ['2017-8-22', '七月'],
            ['2017-8-23', '初二', '處暑'],
            ['2017-8-24', '初三'],
            ['2017-8-25', '初四'],
            ['2017-8-26', '初五'],
            ['2017-8-27', '初六'],
            ['2017-8-28', '初七'],
            ['2017-8-29', '初八'],
            ['2017-8-30', '初九'],
            ['2017-8-31', '初十'],
            ['2017-9-1', '十一'],
            ['2017-9-2', '十二'],
            ['2017-9-3', '十三'],
            ['2017-9-4', '十四'],
            ['2017-9-5', '十五'],
            ['2017-9-6', '十六'],
            ['2017-9-7', '十七', '白露'],
            ['2017-9-8', '十八'],
            ['2017-9-9', '十九'],
            ['2017-9-10', '二十'],
            ['2017-9-11', '廿一'],
            ['2017-9-12', '廿二'],
            ['2017-9-13', '廿三'],
            ['2017-9-14', '廿四'],
            ['2017-9-15', '廿五'],
            ['2017-9-16', '廿六'],
            ['2017-9-17', '廿七'],
            ['2017-9-18', '廿八'],
            ['2017-9-19', '廿九'],
            ['2017-9-20', '八月'],
            ['2017-9-21', '初二'],
            ['2017-9-22', '初三'],
            ['2017-9-23', '初四', '秋分'],
            ['2017-9-24', '初五'],
            ['2017-9-25', '初六'],
            ['2017-9-26', '初七'],
            ['2017-9-27', '初八'],
            ['2017-9-28', '初九'],
            ['2017-9-29', '初十'],
            ['2017-9-30', '十一'],
            ['2017-10-1', '十二'],
            ['2017-10-2', '十三'],
            ['2017-10-3', '十四'],
            ['2017-10-4', '十五'],
            ['2017-10-5', '十六'],
            ['2017-10-6', '十七'],
            ['2017-10-7', '十八'],
            ['2017-10-8', '十九', '寒露'],
            ['2017-10-9', '二十'],
            ['2017-10-10', '廿一'],
            ['2017-10-11', '廿二'],
            ['2017-10-12', '廿三'],
            ['2017-10-13', '廿四'],
            ['2017-10-14', '廿五'],
            ['2017-10-15', '廿六'],
            ['2017-10-16', '廿七'],
            ['2017-10-17', '廿八'],
            ['2017-10-18', '廿九'],
            ['2017-10-19', '三十'],
            ['2017-10-20', '九月'],
            ['2017-10-21', '初二'],
            ['2017-10-22', '初三'],
            ['2017-10-23', '初四', '霜降'],
            ['2017-10-24', '初五'],
            ['2017-10-25', '初六'],
            ['2017-10-26', '初七'],
            ['2017-10-27', '初八'],
            ['2017-10-28', '初九'],
            ['2017-10-29', '初十'],
            ['2017-10-30', '十一'],
            ['2017-10-31', '十二'],
            ['2017-11-1', '十三'],
            ['2017-11-2', '十四'],
            ['2017-11-3', '十五'],
            ['2017-11-4', '十六'],
            ['2017-11-5', '十七'],
            ['2017-11-6', '十八'],
            ['2017-11-7', '十九', '立冬'],
            ['2017-11-8', '二十'],
            ['2017-11-9', '廿一'],
            ['2017-11-10', '廿二'],
            ['2017-11-11', '廿三'],
            ['2017-11-12', '廿四'],
            ['2017-11-13', '廿五'],
            ['2017-11-14', '廿六'],
            ['2017-11-15', '廿七'],
            ['2017-11-16', '廿八'],
            ['2017-11-17', '廿九'],
            ['2017-11-18', '十月'],
            ['2017-11-19', '初二'],
            ['2017-11-20', '初三'],
            ['2017-11-21', '初四'],
            ['2017-11-22', '初五', '小雪'],
            ['2017-11-23', '初六'],
            ['2017-11-24', '初七'],
            ['2017-11-25', '初八'],
            ['2017-11-26', '初九'],
            ['2017-11-27', '初十'],
            ['2017-11-28', '十一'],
            ['2017-11-29', '十二'],
            ['2017-11-30', '十三'],
            ['2017-12-1', '十四'],
            ['2017-12-2', '十五'],
            ['2017-12-3', '十六'],
            ['2017-12-4', '十七'],
            ['2017-12-5', '十八'],
            ['2017-12-6', '十九'],
            ['2017-12-7', '二十', '大雪'],
            ['2017-12-8', '廿一'],
            ['2017-12-9', '廿二'],
            ['2017-12-10', '廿三'],
            ['2017-12-11', '廿四'],
            ['2017-12-12', '廿五'],
            ['2017-12-13', '廿六'],
            ['2017-12-14', '廿七'],
            ['2017-12-15', '廿八'],
            ['2017-12-16', '廿九'],
            ['2017-12-17', '三十'],
            ['2017-12-18', '十一月', ],
            ['2017-12-19', '初二'],
            ['2017-12-20', '初三'],
            ['2017-12-21', '初四'],
            ['2017-12-22', '初五', '冬至'],
            ['2017-12-23', '初六'],
            ['2017-12-24', '初七'],
            ['2017-12-25', '初八'],
            ['2017-12-26', '初九'],
            ['2017-12-27', '初十'],
            ['2017-12-28', '十一'],
            ['2017-12-29', '十二'],
            ['2017-12-30', '十三'],
            ['2017-12-31', '十四']
        ];
        var heatmapData = [];
        var lunarData = [];
        for (var i = 0; i < dateList.length; i++) {
            heatmapData.push([
                dateList[i][0],
                Math.random() * 300
            ]);
            lunarData.push([
                dateList[i][0],
                1,
                dateList[i][1],
                dateList[i][2]
            ]);
        }
        option = {
            tooltip: {
                formatter: function(params) {
                    return '降雨量: ' + params.value[1].toFixed(2);
                }
            },
            visualMap: {
                show: false,
                min: 0,
                max: 300,
                calculable: true,
                seriesIndex: [2],
                orient: 'horizontal',
                left: 'center',
                bottom: 20,
                inRange: {
                    color: ['#e0ffff', '#006edd'],
                    opacity: 0.3
                },
                controller: {
                    inRange: {
                        opacity: 0.5
                    }
                }
            },
            calendar: [{
                left: 'center',
                top: 'middle',
                cellSize: [70, 70],
                yearLabel: {
                    show: false
                },
                orient: 'vertical',
                dayLabel: {
                    firstDay: 1,
                    nameMap: 'cn'
                },
                monthLabel: {
                    show: false
                },
                range: '2017-03'
            }],
            series: [{
                type: 'scatter',
                coordinateSystem: 'calendar',
                symbolSize: 1,
                label: {
                    normal: {
                        show: true,
                        formatter: function(params) {
                            var d = echarts.number.parseDate(params.value[0]);
                            return d.getDate() + '\n\n' + params.value[2] + '\n\n';
                        },
                        textStyle: {
                            color: '#000'
                        }
                    }
                },
                data: lunarData
            }, {
                type: 'scatter',
                coordinateSystem: 'calendar',
                symbolSize: 1,
                label: {
                    normal: {
                        show: true,
                        formatter: function(params) {
                            return '\n\n\n' + (params.value[3] || '');
                        },
                        textStyle: {
                            fontSize: 14,
                            fontWeight: 700,
                            color: '#a00'
                        }
                    }
                },
                data: lunarData
            }, {
                name: '降雨量',
                type: 'heatmap',
                coordinateSystem: 'calendar',
                data: heatmapData
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>
winx_19970108018
目录
相关文章
Y2000104
|
7月前
echarts 柱状图/折线图x轴坐标间隔
echarts 柱状图/折线图x轴坐标间隔
Y2000104
258 0
祈澈菇凉
echarts折线图折线点大小，颜色，折线的颜色设置
echarts折线图折线点大小，颜色，折线的颜色设置
祈澈菇凉
113 1
祈澈菇凉
|
前端开发
【前端图表】echarts实现散点图x轴时间轴
【前端图表】echarts实现散点图x轴时间轴
祈澈菇凉
146 0
阿甘兄
37Echarts - 柱状图（极坐标系下的堆叠柱状图）
37Echarts - 柱状图（极坐标系下的堆叠柱状图）
阿甘兄
80 0
阿甘兄
38Echarts - 柱状图（极坐标系下的堆叠柱状图）
38Echarts - 柱状图（极坐标系下的堆叠柱状图）
阿甘兄
144 0
阿甘兄
36Echarts - 柱状图（极坐标系下的堆叠柱状图）
36Echarts - 柱状图（极坐标系下的堆叠柱状图）
阿甘兄
64 0
阿甘兄
30Echarts - 柱状图（柱状图框选）
30Echarts - 柱状图（柱状图框选）
阿甘兄
49 0
谷艳爽faye
|
前端开发
echart折线图堆叠 y轴和实际数据不对应
echart折线图堆叠 y轴和实际数据不对应
谷艳爽faye
194 0
漏刻有时
|
前端开发
Echarts柱状图y轴刻度标签图片和柱状渐变功能实现的解决方案
Echarts柱状图y轴刻度标签图片和柱状渐变功能实现的解决方案
漏刻有时
308 0
庄闪闪
|
数据可视化 数据处理
R绘图案例｜基于分面的折线图绘制
R绘图案例｜基于分面的折线图绘制
庄闪闪
301 0