大声道ECharts Gallery

20:11:45图表已生成
代码
option = {
    backgroundColor: '#0c1e55', //背景颜色
    title: {
        text: '大声道', //表头
        x: 'center',
        top: "20",
        textStyle: {
            //文字颜色
            color: '#ffff',
            //字体风格
            fontStyle: 'normal',
            //字体粗细 
            fontWeight: 'bold',
            //字体系列
            fontFamily: 'sans-serif',
            //字体大小
            fontSize: 18

        },
    },
    tooltip: {
        trigger: 'axis',
        //  transitionDuration: 0,
        //   confine: true,
        //   bordeRadius: 51,
        borderWidth: 1, //提示框边框的大小
        borderColor: '#333', //提示框边框的颜色
        backgroundColor: 'rgba(255,255,255,0.9)', //提示框的背景颜色（0.9为透明度）
        textStyle: {
            fontSize: 12, //提示框的字体大小
            color: '#333', //提示框里的字体颜色
            aligin: 'center',

        },
    },
    color: ['red', '#12C3C3', '#FBCD14'], //颜色配置
    legend: {
        data: ['叠翠园', '北岳北'],
        // right:'30',//标签头 居右距离
        bottom: '70',
        // top:'20', //标签头 居上距离
        textStyle: {
            // color: [ '#','#'], // 标签头 提示文字的颜色
            color: '#ffff'
        },
        icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
        // triangle三角形  emptyDiamond 空心菱形
        //emptyCircle 空心圆型 emptyRectangle 空心长方形 emptyTriangle 空心三角形
    },
    dataZoom: [{
        type: 'slider',
        realtime: true,
        //拖拉
        handleSize: '100%', //滑动条两侧的大小
        start: 0, //开始位置
        end: 50, //结束位置
        bottom: 25, //居下的距离
        textStyle: {
            color: '#1bb4f6' // 滑动条的文字颜色
        },
    }],
    grid: {
        left: '3%', //整个曲线居左的距离
        right: '4%', //整个曲线居右左的距离
        bottom: '20%', //整个曲线居下左的距离
        height: '70%', //整个曲线的高
        containLabel: true
    },
    toolbox: {
        show: true,
        feature: {
            // dataZoom: {},
            dataView: {
                readOnly: true
            },
            magicType: {
                type: ['line', 'bar', 'pie']
            },
            restore: {},
            textStyle: {
                color: '#1bb4f6', // 左上角切换的颜色
            },
            // saveAsImage: {}
        }
    },
    optionToContent: function(opt) {
        let axisData = opt.xAxis[0].data; //坐标数据
        let series = opt.series; //折线图数据
        let tdHeads = '<td  style="padding: 0 10px;">时间</td>'; //表头
        let tdBodys = ''; //数据
        series.forEach(function(item) {
            //组装表头
            tdHeads += `<td style="padding: 0 10px">${item.name}</td>`;
        });
        let table = `<table border="1" style="margin-left:50px;border-collapse:collapse;font-size:24px;text-align:center;"><tbody><tr>${tdHeads} </tr>`;
        for (let i = 0, l = axisData.length; i < l; i++) {
            for (let j = 0; j < series.length; j++) {
                //组装表数据
                tdBodys += `<td>${ series[j].data[i]}</td>`;
            }
            table += `<tr><td style="padding: 0 10px">${axisData[i]}</td>${tdBodys}</tr>`;
            tdBodys = '';
        }
        table += '</tbody></table>';
        return table;
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['10月1日', '10月2日', '10月3日', '10月4日', '10月5日', '10月6日', '10月7日'],

        axisLine: {
            lineStyle: {
                color: '#BA55D3', //设置X轴的颜色
                width: 1.5, //设置X轴的粗细
            }
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: '#00FF00' //Y轴的数据字体颜色
            },
        },

    },
    yAxis: [{
            name: "亿元", //左侧单位
            nameTextStyle: {
                color: "#ebf8ac" //左侧单位文字
            },
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#FFFF', //设置Y轴的颜色
                    width: 1.5, //设置Y轴的粗细
                }
            },
            axisLabel: {
                show: true,
                //formatter: "{value} %", //左侧单位添加后缀
                textStyle: {

                    color: '#00FF00' //Y轴的数据字体颜色
                },
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#FFC125' //网格线的颜色
                }
            }
        },
        {
            type: "value",
            name: "同比",
            nameTextStyle: {
                color: "red"
            },
            position: "right",
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: 'red', //设置Y轴的颜色
                    width: 1.5, //设置Y轴的粗细
                }
            },
            axisLabel: {
                show: true,
                formatter: "{value} %", //右侧Y轴文字显示
                textStyle: {
                    color: "red"
                }
            }
        },
    ],
    series: [{
            name: '叠翠园',
            type: 'line',
            smooth: true, //圆滑的曲线
            data: [180, 92, 81, 174, 210, 280, 210],
            symbolSize: 1,
            //  color: '#BA55D3',
            yAxisIndex: 1, //下标以右侧同比数据参考
            lineStyle: {
                width: 5 //改变线条的粗细
            },
             label: {
                        show: true, //是否显示
                        // position: 'top', //位置
                        // distance: 15, //高度
                        // 			color: '#DB5E6A', //颜色
                        // fontWeight: 'bolder', //加粗
                        // fontSize: 20, //字体大小
                    },

        },
        {
            name: '北岳北',
            type: 'line',
            smooth: true,
            data: [340, 382, 391, 334, 390, 390, 410],
            // symbolSize: 1,
            //  label: {
            //             show: true, //是否显示
            //             position: 'top', //位置
            //             distance: 15, //高度
            //             // 			color: '#DB5E6A', //颜色
            //             fontWeight: 'bolder', //加粗
            //             // fontSize: 20, //字体大小
            //         },
        }
    ]
};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
