百度ECHARTS 餅圖使用心得 處理data屬性

作過CRM系統的童鞋應該都或多或少接觸過hicharts或者echarts等數據統計插件.用過這兩款,我的感受echarts的畫面更好看.至於功能,只有適合本身的纔是最好的.

今天來講說我使用echarts的餅圖的心得.

先給你們看一下簡單地效果圖:(鼠標移動到1.0時)

使用echarts,能夠去官網 http://echarts.baidu.com/下載完整源碼或者定製本身須要的模塊.

使用起來很簡單,首先先引用js源文件,再在js中初始化便可:

 <script src="/js/echarts.js"></script>

<div id="main" style="width: 100%;height:600px;overflow: visible"></div>

 <script>

var myChart = echarts.init(document.getElementById('main'));//聲明一個ehcarts對象
var option = {
    title : {//顯示標題
        text: 'BossApp版本信息',
        x:'left',
        textStyle: {
            fontSize: '20',
            color:'#333',
            fontWeight: 'normal'
        }
    },
    tooltip: {//鼠標移到模塊上時,彈出框的內容
        trigger: 'item',
        //formatter: "{a} <br/>{b}: {c} ({d}%)"
        //formatter: "{a} <br/>{b}"
        formatter: function (obj) {
            return obj.name.content
        }
    },
    //legend: {
    //    orient: 'vertical',
    //    show:true,
    //    align: 'left',
    //    data:["1.0","2.0","3.0","4.0","5.0","6.0"]
    //},
    series: [
        {
            name:'版本信息',
            type:'pie',
            //selectedMode: 'single',
            radius: ['50%', '75%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    formatter: function (obj) {
                        return obj.name.title
                    },
                    show: true,
                    position: 'inner',//文字顯示位置,如上圖中的1.0,1.1字樣
                    textStyle: {
                        fontSize: '14',
                        fontWeight: 'normal'
                    }
                },
                emphasis: {
                    //show: true,
                    position: 'inner',
                    textStyle: {
                        fontSize: '14',
                        fontWeight: 'normal'
                    }
                }
            },
            color:['#4fb8e3','#898989','#898989','#898989','#898989','#898989'],
            labelLine: {
                normal: {
                    show: true
                }
            },
            data:[
                //{value:335, name:'1.0版本',selected:true},
                {value:335, name:{
                    title:versionInfo[5].version,
                    content:versionInfo[5].html
                }},
                {value:310, name:{
                    title:versionInfo[4].version,
                    content:versionInfo[4].html
                }},
                {value:234, name:{
                    title:versionInfo[3].version,
                    content:versionInfo[3].html
                }},
                {value:135, name:{
                    title:versionInfo[2].version,
                    content:versionInfo[2].html
                }},
                {value:200, name:{
                    title:versionInfo[1].version,
                    content:versionInfo[1].html
                }},
                {value:200, name:{
                    title:versionInfo[0].version,
                    content:versionInfo[0].html
                }}
            ]
        }
    ]
};
</script>
myChart.setOption(option);//配置生成的echarts,canvas的界面與有option決定

注意option的data這個屬性.在官方文檔上,都是寫的data:[{value:100,name:ricky},{value:101,name:ricky1},.......],

而後tooltip默認的顯示內容就爲data裏面的name屬性.上面的例子中,versionInfo是一個變量,經過訪問後臺接口獲取的一個對象.versionInfo有version與html這兩個屬性,假如你須要將versionInfo的html屬性顯示在tooltip中.怎麼辦呢?

我試過直接指定name:versionInfo.html.可是沒有用.通過幾回實驗,發現將name當成一個對象進行處理,再設置tooltip的formatter,

formatter: function (obj) {
            return obj.name.content
        }
這樣搞定了,但因爲此時legend的data與series的data不一致,因此沒法展現出下圖的效果