码迷,mamicode.com
首页 > 其他好文 > 详细

Echarts

时间:2017-08-18 18:43:58      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:pos   var   document   lin   搜索引擎   改变   添加   line   option   

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‘],
                }
          }
     }
]

 

Echarts

标签:pos   var   document   lin   搜索引擎   改变   添加   line   option   

原文地址:http://www.cnblogs.com/peiyao/p/7390912.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!