echarts生成图表

来源：互联网发布：怎样更改淘宝验证码编辑：程序博客网时间：2024/05/29 04:48

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>ECharts</title>    <!-- 引入 echarts.js -->    <script src="echarts.min.js"></script></head><body>    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->    <div id="main" style="width: 600px;height:400px;"></div>    <script type="text/javascript">        // 基于准备好的dom，初始化echarts实例        var myChart = echarts.init(document.getElementById('main'));        // 指定图表的配置项和数据        var option = {            title: {                text: 'ECharts 入门示例'            },            tooltip: {                trigger : 'item'            },            legend: {                data:['目标销量','实际销量']            },            xAxis: [{                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]            },            {                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],                xAxisIndex : 1,                axisLabel : {                    show : false                }            }],            grid : {                left : '1%',                right : '1%',                bottom : '3%',                containLabel : true            },            yAxis: {},            series: [{                name: '目标销量',                type: 'bar',                data: [15, 25, 36, 16, 10, 20],                itemStyle : {                    normal : {                        color : 'yellow'                    }                }            },            {                name: '实际销量',                type: 'bar',                data: [8, 22, 18, 12, 8, 15],                xAxisIndex : 1,                itemStyle : {                    normal : {                        color : 'red'                    }                }            }]        };        // 使用刚指定的配置项和数据显示图表。        myChart.setOption(option);    </script></body></html>

这里写图片描述

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>ECharts</title>    <!-- 引入 echarts.js -->    <script src="echarts.min.js"></script></head><body>    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->    <div id="main" style="width: 600px;height:400px;"></div>    <script type="text/javascript">        // 基于准备好的dom，初始化echarts实例        var myChart = echarts.init(document.getElementById('main'));        // 指定图表的配置项和数据        var option = {            title: {                text: 'ECharts 入门示例'            },            tooltip: {                trigger : 'axis',                axisPointer : {                    type : 'shadow'                }            },            legend: {                data:['目标销量','实际销量']            },            grid : {                left : '1%',                right : '1%',                bottom : '3%',                containLabel : true            },            xAxis: [{                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]            }],            yAxis: [{                type : 'value',                axisLabel : {                    formatter : '{value}mm'                }            },            {                type : 'value',                axisLabel : {                    formatter : '{value}bb'                }            }],            series: [{                name: '目标销量',                type: 'bar',                data: [15, 25, 36, 16, 10, 20],                itemStyle : {                    normal : {                        color : 'yellow'                    }                }            },            {                name: '实际销量',                type: 'bar',                data: [8, 22, 18, 12, 8, 15],                yAxisIndex : 1,                itemStyle : {                    normal : {                        color : 'red'                    }                }            }]        };        // 使用刚指定的配置项和数据显示图表。        myChart.setOption(option);    </script></body></html>

这里写图片描述

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>ECharts</title>    <!-- 引入 echarts.js -->    <script src="echarts.min.js"></script></head><body>    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->    <div id="main" style="width: 600px;height:400px;"></div>    <script type="text/javascript">        // 基于准备好的dom，初始化echarts实例        var myChart = echarts.init(document.getElementById('main'));        // 指定图表的配置项和数据        var option = {            tooltip : {                trigger : 'item',                formatter : '{b} : {c}  ({d}%)'            },            series : [                {                    name: '访问来源',                    type: 'pie',                    radius: '55%',                    data:[                        {value:235, name:'视频广告'},                        {value:274, name:'联盟广告'},                        {value:310, name:'邮件营销'},                        {value:335, name:'直接访问'},                        {value:400, name:'搜索引擎'}                    ],                    itemStyle: {                        normal: {                            label : {                                formatter : '{b} : {c}  ({d}%)'                            }                        }                    }                }            ]        };        // 使用刚指定的配置项和数据显示图表。        myChart.setOption(option);    </script></body></html>

这里写图片描述

0 0