echarts各种图表的样式区别写法

1) 饼图

var option = {
    color: ['#1c90e7', '#fc6600', '#ffbb2f', '#ffff00', '#009933', '#ff66ff', '#006699', '#ff9999', '#808000', '#00cccc','#999999'],
    // 提示框
    tooltip: {
        show: true,
        trigger: 'item',
        formatter: '{b}: {c}票'
    },
    series: [
        {   type: 'pie',
        radius: ['45%', '70%'],
        center: ['50%', '50%'],
        label: {formatter: '{b}\n {c}票 ({d}%)',},
        data: data
        }
    ]
};

2) 仪表盘

var option = {
    series: [{
        type: 'gauge',
        radius: '70%',
        center: ["50%", "50%"],
        min: 0,
        max: 100,
        itemStyle: {
            color: ['#FD7347'],
            shadowColor: 'rgba(0,138,255,0.45)',
            shadowBlur: 10,
            shadowOffsetX: 2,
            shadowOffsetY: 2
        },
        progress: {
            show: true,
            roundCap: true,
            width: 13
        },
        pointer: {
            show: false,// 隐藏指针
            icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
            length: '35%',
            width: 6,
            offsetCenter: ['0', '-35%']
        },
        axisTick: {
        	show: false,//隐藏刻度
        },
        splitLine: {
        	show: false,//隐藏坐标
        },
        axisLabel: {
        	show: false,//隐藏坐标标签值
        },
        title: {
            offsetCenter: [0, '30%'],
            fontSize: 11
        },
        detail: {
            fontSize: 30,
            offsetCenter: [0, '0%'],
            valueAnimation: true,
            formatter: '{value}%',
            color: 'auto'
        },
        data: data
    }]
};

3) 柱形图

var option = {
    color: ['#1c90e7', '#fc6600', '#ffbb2f', '#ffff00', '#009933', '#ff66ff', '#006699', '#ff9999', '#808000', '#00cccc','#999999'],
    tooltip: {
        show: true,
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    xAxis: {
        type: 'category',
        data: data.x,
        axisLabel: {
            //interval: 0,    //强制文字产生间隔
            //rotate: 45,     //文字逆时针旋转45°
            //color: '#adadad',
            fontSize: 10
        },
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            //color: '#adadad',
            fontSize: 10
        },
    },
    series: [{
        data: data.y,
        type: 'bar',
        barWidth : 30,//柱图宽度
        itemStyle: {
            normal: {
            //这里是重点
            color: function(params) {
                //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                var colorList = ['#0e72cc','#6ca30f', '#f59311', '#fa4343', '#29ccc9', '#d12a6a','#A481CC','#85c021',];
                return colorList[params.dataIndex]
            },
            label: {
                show: true, //开启显示
                //position: 'top', //在上方显示
                textStyle: { //数值样式
                    fontSize: 10
                }
            }
            }
        },
    }]
};

4) 条形图

var option = {
    color: ['#1c90e7', '#fc6600', '#ffbb2f', '#ffff00', '#009933', '#ff66ff', '#006699', '#A481CC', '#808000', '#00cccc','#999999'],
    tooltip: {
        show: true,
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    xAxis: {
        type: 'value',
        axisLabel: {
            interval: 0,    //强制文字产生间隔
            //color: '#adadad',
            fontSize: 10
        },
    },
    yAxis: {
        type: 'category',
        data: data.x,
        inverse:true,// 倒序
        axisLabel: {
            //color: '#adadad',
            fontSize: 10
        },
    },
    series: [{
        data: data.y,
        type: 'bar',
        itemStyle: {
        normal: {
        //这里是重点
        color: function(params) {
        //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
        var colorList = ['#0e72cc','#6ca30f', '#f59311', '#fa4343', '#16afcc', '#d12a6a','#0e72cc','#85c021',];
        return colorList[params.dataIndex]
        },
        label: {
            show: true, //开启显示
            // position: '', //在上方显示
            textStyle: { //数值样式
                fontSize: 10
            }
        }
        },

        }
    }]
};

5) 词云图

var option = {
    //colors : ['#fda67e', '#81cacc', '#cca8ba', "#88cc81", "#82a0c5", '#fddb7e', '#735ba1', '#bda29a', '#6e7074', '#546570', '#c4ccd3'],
    // 提示框
    tooltip: {
        show: true,
        formatter: '{b}: {c}万元',
    },
    series: [{
        type: 'wordCloud',
        shape: 'ellipse',
        gridSize: 8,
        //sizeRange:[15,25],
        //drawOutOfBound:true,
        textStyle: {
            //normal: {
            fontFamily: '微软雅黑',
            color: function () {
            var colors = ['#fda67e', '#81cacc', '#cca8ba', "#88cc81", "#82a0c5", '#fddb7e', '#735ba1', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];
            return colors[parseInt(Math.random() * 10)];
            }
            //}
        },
        data: data
        }
    ]
};

注：画词云图的时候需要引入词云的js文件