thinkphp5整合echarts实现图表数据

浏览:252 发布日期:2018/08/11 分类:功能实现 关键字: thinkphp5整合echarts实现图表数据
thinkphp5整合echarts实现图表数据
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style=""></div>
    <script type="text/javascript">
    //var myChart = echarts.init(document.getElementById('main'), 'light');
    var myChart = echarts.init(document.getElementById('main'), 'dark');/**灰色背景**/
    // 显示标题,图例和空的坐标轴
    myChart.setOption({
    title: {
    text: '一周数据图表',
    left: 'center',
     textStyle:{
        fontSize:28,
        color:"#90EC7D",
     }
    },
    
    tooltip: {
         trigger: 'axis',
         textStyle: {  //折线字体大小
            "fontSize": 18
        }
    },
    
    legend: {
    left: 'left',
    data:['数据'],
    textStyle: {
           color:'#FF00FF',
           fontSize: '16'
        }
    },
    
     grid: {
        left: '3%',
        right: '5%',
        bottom: '5%',
        containLabel: true
    },
    
    xAxis: {
    name: '日期',
    nameTextStyle: {  /***坐标轴标题样式设置***/
    color: ['#FF00FF'],
    fontSize:'16'
    }, 
    axisLabel: {   //坐标轴文本标签
        rotate: -30,
        interval: 0,
        textStyle: {
            color: '#90EC7D',
            /*align: 'left',align: 'right',*/
            fontSize:'16'
        }
    },
    
    /***坐标轴样式设置***/
    axisLine: {
        lineStyle: {
        type: 'solid',
        color: 'orange',//左边线的颜色
        width:'2',//坐标线的宽度
        }
    },
    
    
    data: []
    },
    yAxis: {
    name: '数值',
    nameTextStyle: {  /***坐标轴标题样式设置***/
    color: ['#0087ED'],
    fontSize:'16'
    }, 
    axisLabel: {   //坐标轴文本标签
        rotate: 30,
        interval: 0,
        textStyle: {
            color: '#FF00FF',
            /*align: 'left',align: 'right',*/
            fontSize:'16'
        }
    },
    /***坐标轴样式设置***/
    axisLine: {
        lineStyle: {
        type: 'solid',
        color: 'orange',//左边线的颜色
        width:'2',//坐标线的宽度
        }
    },
    },
    series: [{
    name: '数据', /**和legend保持一致**/
    type: 'line',
    //symbol: 'circle',     //设定为实心点
    symbolSize:10,//拐点大小
    label: { /**折线拐点显示数据**/
    normal: {
    show: true,
    color:'#FF00FF',
    fontWeight:'bold',
    fontSize:'18'
    }
    },
    
    
    itemStyle : {  /**折线样式设置**/
    normal : {
    color:'#00FF00',  //折线圈圈的颜色
    lineStyle:{
    width:2,//折线宽度
    color:"#FF3399"//折线颜色
    }
    }
    },
    
    data: []
    }]
    });

    // 异步加载数据
    $.post('{:url('hk666/echarts')}').done(function (res) {
    var data = $.parseJSON(res);
    // 填入数据
    myChart.setOption({
    xAxis: {
    data: data.xdata
    },
    series: [{
    data: data.ydata
    }]
    });
    });
        
    </script>
评论( 相关
后面还有条评论,点击查看>>