echarts移動端中例子總結。

接下來我總結一下我經常使用到的幾個移動端echarts小例子：

   第一步:我先引入本身想要的庫

 

第二步：

 給echarts給了一個窗口（有大小的窗口）

第三步：

開始引入你想要的圖形的options

我作的第一種是餅狀圖，接下來我給你們講下具體用到的參數

   

 　　　　　　一、先從後臺接收到你想要的數據

　　　　　　

　　　　　　

　　　　　　  二、

var mytopics = echarts.init(document.getElementById('topic-main'));
　　//設置你的餅圖每個圈的樣式 var dataStyle = { 
        normal: {
            label: {
                show: false
            },
            labelLine: {
                show: false
            }
        }
    };
    var placeHolderStyle = {
        normal: {
            color: 'rgba(0,0,0,0)',
            label: {
                show: false
            },
            labelLine: {
                show: false
            }
        },
        emphasis: {
            color: 'rgba(0,0,0,0)'
        }
    };
    var option = {
        title: {  //標題的樣式
            text: '課程總練習量',
            x: 'center',
            y: '60%',
            itemGap: 30,
            textStyle: {
                color: 'rgba(30,144,255,0.8)',
                fontFamily: '微軟雅黑',
            }
        },
        tooltip: {//鼠標移動上去以後顯示的樣式（提示語）
            show: true,
            // position: ['20%', '50%'],
            confine:true,    //在移動端，提示框中的內容若是長了就會移動到窗口外，因此該參數是限制提示框始終在窗口內
            
            formatter: "{a} <br/>{b} : {c} ({d}%)",//這個是提示框上的文字，若是不寫，也能出來，可是寫了就得本身定義顯示的內容
        },
        legend: {  //它是圖形最頂層的三個小方塊每個顏色所表明的東西 // x : '66%',
            // y : '15%',

            data: dataname  //數據，dataname=['練習量','佔用率']，數組形式
        },
        dataZoom: {
            show: true,
            start: 30,
            end: 100
        },
        series: [{      //每個所表明的數據，三個對象
            name: '1',
            type: 'pie',
            center: ['50%', '60%'],
            clockWise: false,
            radius: ['65%', '80%'],
            itemStyle: dataStyle,
            data: [{      //兩個對象所表明的是通常是想顯示的東西，另外一半就是剩下的百分比

                value: datavalue[0],
                name: dataname[0]
            }, {
                value: datasurplusvalue[0],
                name: datasurplusname[0],
                itemStyle: placeHolderStyle
            }]
        }, {
            name: '2',
            type: 'pie',
            center: ['50%', '60%'],
            clockWise: false,
            radius: ['50%', '65%'],
            itemStyle: dataStyle,
            data: [{
                value: datavalue[1],
                name: dataname[1]
            }, {
                value:datasurplusvalue[1],
                name:  datasurplusname[1],
                itemStyle: placeHolderStyle
            }]
        }, {
            name: '3',
            type: 'pie',
            clockWise: false,
            center: ['50%', '60%'],
            radius: ['35%', '50%'],
            itemStyle: dataStyle,
            data: [{
                value: datavalue[2],
                name: dataname[2]
            }, {
                value: datasurplusvalue[2],
                name: datasurplusname[2],
                itemStyle: placeHolderStyle
            }]
        }]
    };

    mytopics.setOption(option);

 

var myChart = echarts.init(document.getElementById('section-main'));
    var fugailv = [5, 20, 36, 10, 10, 20, 100];
    var zhengquelv = [5, 20, 36, 10, 10, 20, 100];
    var chapterdata=['第一章', '第二章', '第三章', '第四章', '第五章', '第六章', '第七章'];
    // 指定圖表的配置項和數據
    var option = {
        title: {
            // text: 'ECharts 入門示例',
        },
        // color: ['#55acf3', '#283b56'],
        color: ['#55acf3', '#283b56','#CF7030'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#283b56',
                }

            },
            textStyle:{
                 align:'left',
            },
            // position:['20%','30%']
            confine:true,

        },
        grid: {
            top: '15%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        legend: {
            data: ['總題量', '作過的題(主觀加客觀)','作對的客觀題'],
            // x : '66%',
            // y : '15%',
        },
        
        yAxis: [{
            type: 'category',
            data: chapterdata,
　　　　　　　
        }],
        xAxis: [{
            type: 'value',
            scale: true,
             min:0//從0刻度開始
        }],
        series: [{
            name: '總題量',
            type: 'bar',
            // barWidth: '60%',
            stack: '總題量',
            label: {
                normal: {
                    // show: true,
                    position: 'insideRight'
                }
            },
            data: [5, 20, 36, 10, 10, 20, 200]
        }, {
            name: '作過的題(主觀加客觀)',
            type: 'bar',
            stack: '總題量',
            label: {
                normal: {
                    // show: true,
                    position: 'insideRight'
                }
            },
            data: [2, 10, 30, 5, 10, 20, 90]
        }, {
            name: '作對的客觀題',
            type: 'bar',
            stack: '總題量',
            label: {
                normal: {
                    // show: true,
                    position: 'insideRight'
                }
            },
            data: [12, 15, 40, 20, 10, 20, 90]
        }]
    };

    // 使用剛指定的配置項和數據顯示圖表。
    myChart.setOption(option);
    myChart.on('click', function(params) {
        var datas=[12, 15, 40, 20, 10, 20, 90];
        console.log(params.name)
        var index=chapterdata.indexOf(params.name)
        console.log(index)
        $('.charperrate p.charpters').html(params.name)
        $('.charperrate p.charperrates').html(datas[index])