Echarts

Posted 2020-10-03 peiyao

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