echarts ajax數據加載方法總結(詳細)

方法一：

data為數組類型的，data:[10,20,30];

HTML

<div class="d_main" id="main3"></div>

css

 .d_main{
    width:80%;
    height:400px;
    margin:0 auto;
  }

js

var myChart3 = echarts.init(document.getElementById('main3'));//    每月標的總額
 var option3 = {
            backgroundColor:"#192138", //背景顏色
            textStyle: {
                color: '#02F5F6'  //全局字體顏色，不設置則每個扇形的字和扇形顏色一致
            },
            tooltip : {
                trigger: 'axis',
                axisPointer : {
                    type : 'shadow'
                }
            },
            grid: {
                left: '3%', //表顯示的位置
                right: '14%',
                bottom: '3%',
                containLabel: true,
                backgroundColor:"rgba(256,256,256,0.5)"
            },
            xAxis : [
                {
                    name:"單位（月）",  //x軸單位
                    type : 'category',
                    boundaryGap : false,
                    data : ['','4月','5月','6月','7月','8月']
                }
            ],
            yAxis : [
                {
                    name:"單位（萬元）",//y軸單位
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'標的總額',
                    type:'line',
                    stack: '總量',
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                    areaStyle: {
                        normal: {
                            color:"#01FFFF", //區域填充顏色
                            opacity:0.3
                        }
                    },
                    itemStyle:{
                        normal: {
                            color:"#01FFFF" //拐點顏色
                        }
                    },
                    data:[],
                    lineStyle:{
                        normal:{
                            color:"#01FFFF", //線條顏色
                            opacity:0.5
                        }
                    }
                }
            ]
        };


 $.get('data.json').done(function (data) {
            // 填入數據
            myChart3.setOption({
                series: [{
                    // 根據名字對應到相應的系列
                    data: data
                }]
            });
        });

圖標展示

 

方法二：

data為對象類型，

data:[
    {
        value:134,
 name:'7天標的',
 itemStyle: {
 normal: {
 color: '#01FFFF'
 }
 }
 }
]

HTML

<div class="d_main" id="main1"></div>

js

var myChart1 = echarts.init(document.getElementById('main1'));
var option1 = {
            backgroundColor:"#192138",
            color: ['#3398DB'],
            textStyle: {
                color: '#FFF'  //全局字體顏色，不設置則每個扇形的字和扇形顏色一致
            },
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐標軸指示器，坐標軸觸發有效
                    type : 'shadow'        // 默認為直線，可選為：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '14%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    name:"天數（天）",
                    type : 'category',
                    data : ['7天', '30天', '45天'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis : [
                {
                    name:"人數（人）",
                    type : 'value'
                }
            ],
            series : [
                {
//                name:'直接訪問',
                    type:'bar',
                    barWidth: '60%',
                    data:[]
                }
            ]
        };

// 使用剛指定的配置項和數據顯示圖表。
 myChart1.setOption(option1);
$.get('data.json').done(function (data) {
            // 填入數據
            var myData=[];
            var myTemp;
            var colorList1=['#01FFFF','#FFCA00','#C0FF00'];
            for(var i=0;i<data.length;i++){
                myTemp={value:data[i],itemStyle:{normal:{color:colorList1[i]}}};
                myData.push(myTemp);
            }
//            console.log(myData);
            myChart1.setOption({
                series: [{
                    data:myData
                }]
            });
        });

圖標展示