echarts-3.8.4

来源：互联网发布：大数据可视化 tableu 编辑：程序博客网时间：2024/06/05 01:17

<script src="${ctxStatic}/echarts-3.8.4/echarts/dist/echarts.js"></script>  <style type="text/css">    .lineChart {        backgroun:#FFF;        height: 300px;        width: 100% !important;        overflow: hidden;         padding : 4px;         margin-bottom: 4px;         border: 0;         -webkit-border-radius: 4px;         -moz-border-radius: 4px;         border-radius: 4px;         -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);         -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);         box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);    } </style>

<%--折线图--%><script type="text/javascript">    $(document).ready(function() {        var url="${ctx}/answer/answerQuestionnaire/getChartDataFor12Month";        $.ajax({            url:url,            type:"POST",            beforeSend: function(){            },            success:function(data)            {                debugger;                var xAxisData = JSON.parse(data).data["xAxisData"];                var yAxisData = JSON.parse(data).data["yAxisData"];                var standardData = JSON.parse(data).data["standardData"];                //初始化echarts实例                var myChart = echarts.init(document.getElementById('lineChart'));                //使用制定的配置项和数据显示图表                var option=setOptions(xAxisData,yAxisData,standardData);                myChart.setOption(option);            }, error: function(){                alert('error');            }        });        function setOptions(xAxisData,yAxisData,standardData) {            var legends=['每月平均值'];            var series=[];            var colors = ['#5793f3', '#d14a61', '#675bba'];            series.push({                name:legends[0],                type:'line',                itemStyle : { normal: {label : {show: true}}},                smooth: true,                markLine: {                    data: [                        {                            name: '标准值',                            yAxis: 70                        }                    ]                },                data: yAxisData            });            var   option = {                color: colors,                tooltip: {                    trigger: 'none',                    axisPointer: {                        type: 'cross'                    }                },                legend: {                    data:legends                },                grid: {                    top: 70,                    bottom: 50                },                xAxis: [                    {                        type: 'category',                        axisTick: {                            alignWithLabel: true                        },                        axisLine: {                            onZero: false,                            lineStyle: {                                color: colors[1]                            }                        },                        axisPointer: {                            label: {                                formatter: function (params) {                                    return '每月平均值 ' + params.value                                        + (params.seriesData.length ? '：' + params.seriesData[0].data : '');                                }                            }                        },                        data: xAxisData                    },                    {                        type: 'category',                        axisTick: {                            alignWithLabel: true                        },                        axisLine: {                            onZero: false,                            lineStyle: {                                color: colors[0]                            }                        },                        axisPointer: {                            label: {                                formatter: function (params) {                                    return '每月平均值' + params.value                                        + (params.seriesData.length ? '：' + params.seriesData[0].data : '');                                }                            }                        },                        data: xAxisData                    }                ],                yAxis: [                    {                        type: 'value'                    }                ],                series: series            };            return option;        }    });</script>

<div id="lineChart"  class="lineChart"></div>

阅读全文

0 0