echarts使用总结

#### 柱状图柱子渐变及设置柱子宽度

legend: {

    data: ['使用时长（h）'],

    right:'10%'

},

series: [

    {

        data: [120, 200, 150, 80, 70, 110, 130],

        name:'使用时长（h）',

        type: 'bar',

        barWidth : 40,//柱图宽度

        itemStyle: {

            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

                { offset: 0, color: '#71ADF2' },

                { offset: 1, color: '#2668C9' }

            ])

        },

    }

]

#### 饼图 文字描述+百分比   文字颜色与模块颜色一致

color:["#70B3F9","#1BBE6D","#FE9B02","#9966E2","#EB4115"],

series: [

    {

        name: 'Access From',

        type: 'pie',

        radius: ['40%', '70%'],

        avoidLabelOverlap: false,

        itemStyle: {

            shadowOffsetX:-3,

            shadowOffsetY:3,

            shadowBlur: 10,

            shadowColor: 'rgba(0, 0, 0, 0.5)'

        },

        emphasis: {

            itemStyle: {

                shadowBlur: 10,

                shadowOffsetX: 0,

                shadowColor: 'rgba(0, 0, 0, 0.5)'

            }

        },

        labelLine:{  

            length: 15, // 第一段线 长度

            length2: 50, // 第二段线 长度

            lineStyle: {

                color: "#666666",  // 指示线颜色

                type:"dashed"

             }

        },

        label: {

            formatter: '{a|{b}}\n{hr|}',

            //折线图文字颜色

            color:"#666666",

            rich: {

                //圆点位置大小配置

                hr: {

                    //auto自定义

                    backgroundColor: "inherit",

                    borderRadius: 6,

                    width: 6,

                    height: 6,

                    padding: [6, 6, 0, -24]

                },

                a: {

                    padding: [-6, 10, -20, 15]

                },

                textStyle:{

                    fontSize:16

                },

            }

        },

        data: [

            { value: 1048, name: 'Search Engine' },

            { value: 735, name: 'Direct' },

            { value: 580, name: 'Email' },

            { value: 484, name: 'Union Ads' },

            { value: 300, name: 'Video Ads' }

        ]

    }

]

#### 堆叠柱图

data: ['一月','二月','三月','四月','五月','六月'],

data: [5,2,4,1,8,2],

data: [1,5,6,3,7,4],

xAxis: {

    data: xAxisData,

    splitLine: {

        show: true,

        lineStyle:{

            color: ['#E7EAEC'],

            width: 1,

            type: 'solid'

        }

    },

},

series: [

    {

        name: 'bar',

        type: 'bar',

        stack: 'one',

        emphasis: emphasisStyle,

        data: data1,

        barWidth : 40,//柱图宽度

        itemStyle: {

            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

                { offset: 0, color: '#71ADF2' },

                { offset: 1, color: '#2668C9' }

            ])

        },

    },

    {

        name: 'bar2',

        type: 'bar',

        stack: 'one',

        emphasis: emphasisStyle,

        data: data2,

        itemStyle: {

            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

                { offset: 0, color: '#FE9B02' },

                { offset: 1, color: '#F2BF71' }

            ])

        },

    }

]

#### 折线拐点

tooltip: {

    trigger: 'axis'

},

grid: {

    left: '3%',

    right: '4%',

    bottom: '3%',

    containLabel: true

},

color:["#2C8BF0","#FE9B02"],

series: [

    {

        name: 'Email',

        type: 'line',

        smooth: true,

        data: [120, 132, 101, 134, 90, 120, 65],

        symbol:'circle',

        showSymbol: false,

        symbolSize:16,   //拐点圆的大小

        lineStyle: {

            color: '#2C8BF0',

            width: 4,

            shadowColor: 'rgba(44, 139, 240, .5)',//设置折线阴影

            shadowBlur: 10,

            shadowOffsetY: 10,

        },

        emphasis: {

            // 鼠标hover上去的时候，拐点的颜色和样式

            itemStyle: {

                color: '#2C8BF0', //颜色

                width:10,

                height:10,

                borderColor: '#D2F6FC', //图形的描边颜色

                borderWidth: 2, // 描边的线宽

                shadowBlur: 5, // 图形的阴影大小

                shadowColor: '#E7FCFF', // 图形的阴影颜色

            },

        },

    },

    {

        name: 'Union Ads',

        type: 'line',

        smooth: true,

        data: [130, 120, 134, 101, 120, 65, 120],

        symbol:'circle',

        showSymbol: false,

        symbolSize:16,   //拐点圆的大小

        lineStyle: {

            color: '#FE9B02',

            width: 4,

            shadowColor: 'rgba(254, 155, 2, .5)',//设置折线阴影

            shadowBlur: 10,

            shadowOffsetY: 10,

        },

        emphasis: {

            // 鼠标hover上去的时候，拐点的颜色和样式

            itemStyle: {

                color: '#FE9B02', //颜色

                width:5,

                height:5,

                borderColor: '#FED2B1', //图形的描边颜色

                borderWidth: 2, // 描边的线宽

                shadowBlur: 10, // 图形的阴影大小

                shadowColor: '#FFE5D2', // 图形的阴影颜色

            },

        },

    }

]

//坐标轴颜色

axisLine:{

    lineStyle:{

        color:'red'

    }

},

//x轴文字旋转

axisLabel:{

    rotate:30,

    interval:0

}