写博客不是为了博眼球 是为了记笔记

左侧饼图

    Pielinechart1(){
        let myChart = echarts.init(document.getElementById("Piechart1"));       
        let option = {
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            color:['#65b5c2', '#ffbe05','#1dc499','#177bbb', '#3ddcde','#177bbb','#1ccacc', '#e33244','#ffbe05','#3ddcde'],//自定义饼图颜色
            legend: {
                itemWidth: 20,// 标志图形的长度
                itemHeight: 10,// 标志图形的宽度
                orient: 'vertical',// 标志的位置
                right: 80,
                top: 20,
                bottom: 20,
                data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','555','566','777','888','999','333']
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '50%',
                    label: {
                        normal: {
                            position: 'inner',
                            show : false
                        }
                    },
                    center: ['28%', '50%'],// 调整饼的位置
                    data:[
                        {value:335, name:'直接访问'},
                        {value:310, name:'邮件营销'},
                        {value:234, name:'联盟广告'},
                        {value:135, name:'视频广告'},
                        {value:335, name:'直接访问'},
                        {value:310, name:'999'},
                        {value:234, name:'555'},
                        {value:234, name:'566'},
                        {value:135, name:'777'},
                        {value:135, name:'333'},
                        {value:148, name:'888'}
                    ],
                    itemStyle: {

                     normal:{
                                borderWidth:'2',
                                borderColor:'#FFF',
                            },//给饼图每一块之间加个白色分割线
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    },

右侧横向柱状图

Barchart2(){
        let myChart = echarts.init(document.getElementById("Barchart2"));       
        let option = {
            tooltip : {
                trigger: 'axis',
                axisPointer : {            
                    type : 'shadow'       
                }
            },
            legend: {
                data: ['直接访问', '邮件营销','联盟广告','视频广告','搜索引擎']
            },
            grid: { // 柱状图的位置调整
                top:'7%',
                left: '15%',
                right: '4%',
                containLabel: true
            },
            xAxis:  {// 控制横坐标显示
                show:false,
                type: 'value',
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true,
                    // lineStyle: {
                    //     color: '#00ffee'
                    // }
                },
            },
            yAxis: {// 控制纵坐标显示
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false,
                    // lineStyle: {
                    //     color: '#00ffee'
                    // }
                },
                type: 'category',
                data: ['周一','周二','周三','周四','周五','周六','周日','周四','周五','周六',]
            },
            series: [
                {
                    name: '',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                             barBorderRadius:[6, 6, 6, 6],// 设置柱状图 圆角
                            color: function(params) {// 柱状图设置不同颜色
                                var colorList = ['#65b5c2', '#ffbe05','#1dc499','#177bbb', '#3ddcde','#177bbb','#1ccacc', '#e33244','#ffbe05','#3ddcde'];
                                return colorList[params.dataIndex]
                            }
                        }
                    },
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: [820, 832, 901, 934, 1290, 1330, 1320, 832, 901, 934]
                }
            ]
        };
        myChart.setOption(option);
    },