Echarts初入門

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echart1</title>
    <script src="../vueIview/echarts.js"></script>
</head>
<body>
<div id="main" style="margin: 100px;width: 1400px;height: 800px"></div>
<script >
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {

        title: {
            x:'center',
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量'],
            x:'right'
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };

    var option1 = {
        // 标题
        title:{
            // x轴方向的位置
            x:'center',
            // 文字
            text: 'Just a test      消费记录'
        },
        // 设置全局的文字风格
        textStyle: {
            color: '#fff',
        },
        // 提示文本
        tooltip: {
            // 触发器
            trigger:'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        // 全局背景色
        backgroundColor:'#ff0',
        // 图例说明
        legend:{
            // 图例数据名
          data:['交通','生活','电子产品','吃饭','学习',],
            // 显示方向
            orient:'vertical',
             // x轴方向的位置
            x:'right '
        },
        // 图表数据信息
        series:[{
            // 提示框标题
            name:'消费',
            // 图表类型
            type:'pie', // ：饼图
            // 图表的中心坐标
            center: ['50%', '50%'],
            // 通过配置roseType属性显示为南丁格尔图
            roseType:'angle',
            // roseType:'radius',
            // 图表的数据
            data:[
                {name:'交通',value:'3000',
                    // 给每个小扇形设置颜色
                    itemStyle: {
                        color: '#c23531'
                    }},
                {name:'生活',value:'1900', itemStyle: {
                        color: '#f0f'
                    }},
                {name:'电子产品',value:'6000', itemStyle: {
                        color: '#0ff'
                    }},
                {name:'吃饭',value:'3300', itemStyle: {
                        color: '#0f0'
                    }},
                {name:'学习',value:'4444', itemStyle: {
                        color: '#000'
                    }}
                ],
            // 也可以每个系列分别设置，每个系列的文本设置在 label.textStyle。
            label: {
                normal: {
                    textStyle: {
                        color: '#000'
                    }
                }
            },
            // 标签的视觉引导线设置颜色
            labelLine: {
                normal: {
                    lineStyle: {
                        color: '#0f0'
                    }
                }
            },
            // itemStyle的emphasis是鼠标 hover 时候的高亮样式
            itemStyle: {
                emphasis: {
                    // 设置鼠标移动上面扇形的颜色
                    // color: '#c23531',
                    // 陰影的模糊範圍
                    shadowBlur: 100,
                    // 陰影的橫向偏移
                    shadowOffsetX: 0,
                    // 阴影颜色
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            // 动画效果
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
                return Math.random() * 200;
            }
        }],
    }


    var option2 = {
        title:{
            text: 'Just a test    消费记录',
            x:'center'
        },
        tooltip: {},
        toolbox: {
            feature: {
                dataView: {},
                saveAsImage: {
                    pixelRatio: 2
                },
                restore: {}
            }
        },
        xAxis: {},
        yAxis: {},
        series: [{
            type: 'line',
            smooth: true,
            data: [[12, 5], [19, 20], [36, 36], [48, 10], [60, 10], [72, 20], [78, 36], [80, 66], [90, 99], [111,21],],

        }]
    }

   var option3 = {
       title:{
           text: 'Just a test    消费记录',
           x:'center'
       },
       tooltip: {},
        backgroundColor: '#ff0',
        visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
                colorLightness: [0, 1]
            }
        },
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius: '75%',
                data:[
                    {value:235, name:'视频广告'},
                    {value:274, name:'联盟广告'},
                    {value:310, name:'邮件营销'},
                    {value:335, name:'直接访问'},
                    {value:400, name:'搜索引擎'}
                ],
                roseType: 'angle',
                label: {
                    normal: {
                        textStyle: {
                            // color: 'rgba(255, 255, 255, 0.3)'
                            color: '#00f'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        lineStyle: {
                            // color: 'rgba(255, 255, 255, 0.3)',
                            color: '#0f0'
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#c23531',
                        shadowBlur: 200,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option1);
</script>
</body>
</html>
運行結果：
猜你喜欢
