Echarts

1.使用方法:

  <script src='js/echarts.min.js'></script>

  <div id='box'></div> 

window.onload = function () {   
    var myChart = echarts.init(document.getElementById('box'));
    option = {
        legend: {
            orient: 'vertical',
            x: 'left',
            data:['直接访问','搜索引擎']
        },
        series: [
            {
                name:'访问来源',
                type:'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center',
                        color: '#ccc',
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:335, name:'直接访问'},
                    {value:1548, name:'搜索引擎'}
                ]
            }
        ]
    };
    myChart.setOption(option);
}

2.基本设置:

  (1)ex改变饼图每个块的颜色,分别在data中添加itemStyle对象然后设置color的颜色即可

data:[
     {value:335, name:'直接访问',
          itemStyle: {
               normal: {
                    color: ['#715790'],
               }
          }
                    
    },
    {value:1548, name:'搜索引擎',
          itemStyle: {
                normal: {
                     color: ['#00F4FE'],
                }
          }
     }
]

 

posted @ 2017-08-18 17:33  peiyao  阅读(146)  评论(0编辑  收藏  举报