echarts柱状图和曲线图

白与黑 2022-04-09 20:54:00 1743℃ 12859 0条


使用echart绘制图表时,解决数据重新渲染问题以及根据返回数据的区别绘制不同的图表,本示例根据数据不同,绘制柱状图或者曲线图

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #chart_data{
            display: inline-block;
            text-align:center;
            vertical-align: middle;
            width:70%;
            overflow:hidden;
            overflow-y: auto;
        }
        .work_achievements {
            display: inline-block;
            width: 30%;
            height: 400px;
            float: right;
            box-sizing: border-box;
        }
        .work_achievements_title,#chart_data_title,#admax_title {
            border: none !important;
            line-height: 40px;
            height: 40px;
            padding: 10px !important;
            font-size: 14px;
            background: #fff;
            color: #666;
            border-bottom: 3px solid rgb(241, 243, 251) !important;
            text-align: left;
        }
        #chart_data h3,
        #admax_title h3,
        .work_achievements_title h3 {
            font-size: 14px;
            color: #666;
            font-weight: normal;
        }
        .work_achievements .select_day_show_data {
            margin: 20px 0 20px 10px;
            display: inline-block;
            border-radius: 3px;
            border: 1px solid #ccc;
            color: #666;
            overflow: hidden;
        }
        .work_achievements .select_day_show_data .nearly_days {
            display: inline-block;
            width: 80px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
        }
        .work_achievements .select_day_show_data .nearly_days:nth-child(2) {
            border-left: 1px solid #ccc;
            border-right: 1px solid #ccc;
        }
        .work_achievements .select_day_show_data .nearly_days.current_show_day {
            background: rgb(24, 158, 219);
            color: #fff;
        }
        #nearly_days_data_visual,#chart_data_content,#admax_content {
            text-align: center;
            vertical-align: middle;
            height: 330px;
        }
        #chart_data_content,#admax_content{
            height:360px;
        }
    </style>
</head>
<body>
<div class="work_achievements">
    <div class="work_achievements_title">
        <div style="width: 200px; float: left; text-align: left;">
            <h3>工作战绩</h3>
        </div>
    </div>
    <div class="select_day_show_data">
        <span class="nearly_days nearly_three_days current_show_day" data-val="3">近3天</span>
        <span class="nearly_days nearly_seven_days" data-val="7">近7天</span>
        <span class="nearly_days nearly_thirty_days" data-val="30">近30天</span>
    </div>
    <div id="nearly_days_data_visual"></div>
</div>
<div id="chart_data" data-val="chart_data" class="comomn">
    <div id="chart_data_title">
        <h3>近期(15天)订单数</h3>
    </div>
    <div id="chart_data_content"></div>
</div>
<div id="admax" data-val="admax" class="comomn">
    <div id="admax_title">
        <h3>混合</h3>
    </div>
    <div id="admax_content"></div>
</div>
</body>
<script src="https://libs.cdnjs.net/jquery/3.3.1/jquery.min.js"></script>
<script src="https://libs.cdnjs.net/echarts/4.1.0.rc2/echarts.min.js"></script>
<script>
    getData(11, 'bar', $('.nearly_three_days'));
    getData(11, 'line', $("#chart_data"));
    getData(11, 'max', $("#admax"));
    //工作战绩切换
    $('.work_achievements .select_day_show_data .nearly_days').click(function () {
        $(this).siblings('span').removeClass('current_show_day');
        $(this).addClass('current_show_day');
        getData(11, 'bar', $(this));
    });
    //仓库数据面板展示、工作战绩统计
    function getData(data, type, obj) {
        var xdata = [];
        var ydata = [];
        var myChart = '';
        //默认公用属性
        var option = {
            // title: {
            //     // text: data.name
            //     text: '近期(15天)订单数'
            // },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                },
                formatter: function (params) {
                    return params[0].seriesName + ': ' + params[0].value;
                }
            },
            calculable: true,
            axis: {
                axisTick: {
                    lineStyle: {
                        color: '#ccc',
                        width: 1
                    }
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: true,  //X轴与Y轴重叠false重叠
                axisLine: {
                    lineStyle: {
                        color: '#999'    //xy坐标点具体的颜色
                    }
                },
                splitLine: {
                    show: false,        //是否显示分隔线
                    lineStyle: {
                        type: 'dotted',  //分隔线线的类型。'solid'    'dashed' 'dotted'
                        color: ['#ccc']  //x坐标轴网格线颜色
                    }
                }
            },
            yAxis: [{
                type: 'value',
                min: 0,
                splitLine: {
                    show: true,        //是否显示分隔线
                    lineStyle: {
                        type: 'dotted',  //分隔线线的类型。'solid'    'dashed' 'dotted'
                        color: ['#ccc']  ////y坐标轴网格线颜色
                    }
                },
                splitArea: {show: false},//保留网格区域
                //显示格式化
                axisLabel: {
                    formatter: '{value} ',
                    textStyle: {
                        color: '#999',//y坐标点具体的颜色
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#ccc'
                    }
                },
            }
            ],
            series: [
                {
                    type: type,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'top',
                                //formatter: '{c}'
                                //formatter: '{b}\n{c}'
                            }
                        },
                    },
                }]
        };
        if(obj.hasClass('comomn')){
            //测试数据start
            xdata = ['06-19', '06-20', '06-21', '06-22', '06-23', '06-24', '06-25', '06-26', '06-27', '06-28', '06-29', '06-30', '07-01', '07-02', '07-03'];
            ydata = [100, 106, 500, 192, 80,230, 150, 400, 290, 110, 0, 0, 8, 59, 18];
            var colorList = [];
            //每一条柱状图的颜色
            var colors = [
                '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                    '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                    '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
            ];
            for(var i=0;i<ydata.length;i++){
                colorList.push(colors[Math.floor(Math.random()*15+1)]);
            }
            //测试数据end
            option.grid = {
                top: '25px',
                left: '10px',
                right: '40px',
                bottom: '60px',
                containLabel: true
            };
            if (obj.data('val') == 'chart_data') {
                myChart = echarts.init(document.getElementById('chart_data_content'));
                $('#chart_data_content').removeAttr('_echarts_instance_');  //需要移除此属性才能重新渲染
                //
                option.legend = {
                    legend: {
                        data: ['支付笔数']
                    }
                };
                option.series[0]['name'] = '支付笔数';
                option.series[0]['itemStyle']['normal']['color'] = '#3ec668';
                option.series[0]['data'] = ydata;
                option.yAxis[0]['interval'] = Math.ceil(Math.max.apply(null, ydata) / 10);
                option.yAxis[0]['max'] = Math.max.apply(null, ydata);
                option.xAxis.data = xdata;
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option, true);
            }else if(obj.data('val') == 'admax'){
                myChart = echarts.init(document.getElementById('admax_content'));
                $('#admax_content').removeAttr('_echarts_instance_');  //需要移除此属性才能重新渲染
                //控制文字显示
                option.legend = {
                    legend: {
                        data:["柱状图","折线图"]
                    }
                };
                option.series = [
                {
                    name: '折线图', //点击显示与隐藏
                    type: 'line',
                    itemStyle : {  
                                    normal : {  
                                        lineStyle:{  
                                            color:'#009688'  
                                        }  
                                    }  
                                },  
                    data: ydata
                },
                {
                    name: '柱状图',
                    type: 'bar',
                    itemStyle : {  
                        normal: {
                  //定义一个list,然后根据所以取得不同的值,这样就实现了,
                            color: function(params) {
                                return colorList[params.dataIndex]
                            },
                    //以下为是否显示,显示位置和显示格式的设置了
                            label: {
                                show: true,
                                position: 'top',
                                //formatter: '{c}'
                                //formatter: '{b}\n{c}'
                            }
                        }, 
                    },
                    barWidth:20,
                    data: ydata
                } 
                ];
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option, true);
            }
        }else if (obj.hasClass('nearly_days')) {
            var current_data_val = obj.data('val');
            //测试数据start
            for (var i = 0; i < current_data_val; i++) {
                ydata.push(parseInt(Math.random() * 50 + 100));
            }
            var xdata_arr = [];
            xdata_arr[3] = ['07-01', '07-02', '07-03'];
            xdata_arr[7] = ['06-27', '06-28', '06-29', '06-30', '07-01', '07-02', '07-03'];
            xdata_arr[30] = ['06-04', '06-05', '06-06', '06-07', '06-08', '06-09', '06-10', '06-11', '06-12', '06-13', '06-14', '06-15', '06-16', '06-17', '06-18', '06-19', '06-20', '06-21', '06-22', '06-23', '06-24', '06-25', '06-26', '06-27', '06-28', '06-29', '06-30', '07-01', '07-02', '07-03'];
            xdata = xdata_arr[current_data_val];
            //测试数据end
            var myChart = echarts.init(document.getElementById('nearly_days_data_visual'));
            $('#nearly_days_data_visual').removeAttr('_echarts_instance_');  //需要移除此属性才能重新渲染
            option.grid = {
                top: '20px',
                left: '10px',
                right: '40px',
                bottom: '40px',
                containLabel: true
            };
            option.series[0]['name'] = '工作战绩';      
            option.series[0]['data'] = ydata;
            option.series[0]['itemStyle']['normal']['color'] = 'rgb(88,175,255)';
            option.series[0]['barWidth'] = 20;
            option.yAxis[0]['max'] = Math.max.apply(null, ydata);
            option.xAxis.data = xdata;
            if (current_data_val == '30') {
                option.dataZoom = [
                    {                    // 这个dataZoom组件,默认控制x轴。
                        type: 'slider',  // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                        start: 0,        // 左边在 0% 的位置。
                        end: 40          // 右边在 100% 的位置。
                    },
                    {                    // 这个dataZoom组件,也控制x轴。
                        type: 'inside',  // 这个 dataZoom 组件是 inside 型 dataZoom 组件
                        start: 0,        // 左边在 0% 的位置。
                        end: 100         // 右边在 100% 的位置。
                    }
                ];
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option, true);
        }
    }
</script>
</html>

效果展示

效果图

标签: 前端, HTML, JavaScript, Ajax

非特殊说明,本博所有文章均为博主原创。

评论啦~