Echarts在线免费图表

 
            var option = {
    title: { //标题组件
        text: '总成交额',
        //left:'50px',//标题的位置 默认是left，其余还有center、right属性
        subtext: '2000000.00',
        x: '16%',
        y: 'center',
        textStyle: {
            color: "#436EEE",
            fontSize: 17,
        }
    },
    tooltip: { //提示框组件
        trigger: 'item', //触发类型(饼状图片就是用这个)
        formatter: "{a} <br/>{b} : {c} ({d}%)" //提示框浮层内容格式器
    },
    color: ['#854AE0', '#F22142', '#FACC33', '#5DC35B', '#1F8FFB', '#54C3C2', '#FD40FF'], //手动设置每个图例的颜色
    legend: { //图例组件
        //right:100,  //图例组件离右边的距离
        orient: 'horizontal', //布局  纵向布局 图例标记居文字的左边 vertical则反之
        width: 40, //图行例组件的宽度,默认自适应
        x: 400, //图例显示在右边
        y: 'center', //图例在垂直方向上面显示居中
        itemWidth: 10, //图例标记的图形宽度
        itemHeight: 10, //图例标记的图形高度
        data: ['测试1', '测试2', '测试3', '测试4', '测试5', '测试6', '测试7'],
        textStyle: { //图例文字的样式
            color: '#333', //文字颜色
            fontSize: 18 //文字大小
        }
    },
    series: [ //系列列表
        {
            name: '销售数据分析', //系列名称
            type: 'pie', //类型 pie表示饼图
            center: ['20%', '50%'], //设置饼的原心坐标 不设置就会默认在中心的位置
            radius: ['40%', '50%'], //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
            itemStyle: { //图形样式
                normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                    label: { //饼图图形上的文本标签
                        show: false, //平常不显示
                    },
                    labelLine: { //标签的视觉引导线样式
                        show: false //平常不显示
                    }
                },
                /*emphasis : {   //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                    label : {  //饼图图形上的文本标签
                        show : true,
                        position : 'center',
                        textStyle : {
                            fontSize : '12',
                            fontWeight : 'bold',
                            color: '#333',
                        }
                    }
                }*/
            },

            data: [{
                    value: 80,
                    name: '测试1'
                },
                {
                    value: 10,
                    name: '测试2'
                },
                {
                    value: 30,
                    name: '测试3'
                },
                {
                    value: 20,
                    name: '测试4'
                },
                {
                    value: 25,
                    name: '测试5'
                },
                {
                    value: 25,
                    name: '测试6'
                },
                {
                    value: 25,
                    name: '测试5'
                },
            ]
        }
    ]
};