ECharts+get.done来绘制图表,亲测有效,网上的都是失败,自己尝试写,最新版4.2.1

40 篇文章 2 订阅
23 篇文章 0 订阅

一、按照官网的引入相关js

官网教程引入

二、给个容器

<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>

三、绘制空图表(很重要,否则报错)

option = {
    color: ['#3398DB'],
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器,坐标轴触发有效
            type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['今天', '昨天', '本周', '上周', '本月', '上月', '今年','去年'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'接单数量',
            type:'bar',
            barWidth: '60%',
            color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
            data:[]
        }
    ]
};

四、请求数据

 $.get('http://自己的请求地址').done(function (data) {
                // console.log(data);
                var arr = data.num.split(","); 
                    myChart.hideLoading();
                    myChart.setOption({
                        
    series : [
        {            
            data:arr
        }
    ]
});
            });

五、请求数据展示

//使用thinkphp返回的json数据,直接渲染,简单实用
{"num":"0,7,7,0,7,0,7,0"}
//重要的是按照符号进行分割数据就可以了,很简单

六、完成

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值