【ECharts学习】—实现我的第一个图表

男娘i 2022-10-09 03:19 240阅读 0赞

## 【ECharts学习】—实现我的第一个图表 ##

![在这里插入图片描述][20210623162416593.gif_pic_center]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="js/jquery-3.4.1.min.js"></script>
        <script src="js/echarts.min.js"></script>
    </head>
    
    <body>
        
        <div id="main" style="width:600px; height:400px;border:1px solid #999"></div>
        <script>
            // 创建容器对容器进行初始化 echarts.init()
            var myChart = echarts.init(document.getElementById('main'));
    
            //指定图表的配置项和数据
            var option = { 
                title: {  //标题组件 包含主标题和副标题
                    // id: '', //标识
                    show: true, //是否显示标题组件
                    text: 'ECharts 入门示例', //主标题文本支持\n换行
                    link: 'https://www.baidu.com', //主标题文本超链接
                    target: 'blank', //指定窗口打开主标题超链接
                    textStyle: {  //主标题的样式
                        color: 'green', //主标题文字的颜色
                        fontStyle: 'italic', //主标题文字字体的风格
                        fontWeight: 'bold', //主标题文字字体的粗细
                    },
                    subtext: 'ECharts入门学习', //副标题文本，支持使用 \n 换行
                    sublink: '', //副标题文本超链接
                    subtextStyle: { 
                        color: 'yellowgreen', //副标题文字的颜色
                        //……
                    },
                },
                left: 'right', // title 组件离容器左侧的距离
                padding: 5, //标题内边距 单位px
                itemGap: 10, //主标题之间的距离
                //backgroundColor:'pink',//标题背景颜色 默认透明
    
                tooltip: {  //提示框组件 鼠标悬浮到图形上面 出现的弹框
                    show: true, //是否显示提示框组件
                    trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
                    //折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
                    // format: '{a}-{b}-{c}', //提示框浮层内容格式器 支持字符模板和回调函数(百度地图)两种格式
                },
                legend: {  //图例组件展现了不同系列的标记(symbol)，颜色和名字
                    itemWidth: 40, //图例标记的图形宽度
                    itemHeight: 22, //图例标记的图形高度
                    textStyle: { 
                        color: 'blue', // 文字的颜色
                    },
                    selectedMode: false, //图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭
                    icon: 'rect', //图例项的icon
                    //可以通过 'image://url' 设置为图片，其中 URL 为图片的链接
                    // icon: 'image://img/dog.jpg', 
                    top: '20', //位置
                    data: ['销量']
                },
                xAxis: {  //直角坐标系 grid 中的 x 轴
                    axisLine: {  //坐标轴线的相关设置
    
                        show: true, //是否显示坐标轴轴线
                        lineStyle: {  //坐标轴线的颜色 修改X轴线的时候 标记同步修改
                            color: 'blue',
    
                        }
                    },
                    axisTick: {  //坐标轴的刻度相关设置
                        show: true, // 是否显示刻度
                        alignWidthLabel: true, //刻度和字对齐
                    },
                    axisLabel: {  //坐标轴和标签的设置
                        color: 'red',
    
                    },
                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                },
                yAxis: {  //直角坐标系 grid 中的 y 轴
                    axisLine: {  //坐标轴线的相关设置
    
                        show: true, //是否显示坐标轴轴线
                        lineStyle: {  //坐标轴线的颜色 修改y轴线的时候 标记同步修改
                            color: 'blue',
    
                        }
                    }
                },
                // 坐标在grid区域中的分隔线
                splitLine: { 
                    //show: false,是否显示分隔线
                    lineStyle: { 
                        // color: '#999', // 分隔线的颜色 可以设置成单个颜色
                        //使用深浅的间隔色
                        color: ['#aaa', '#ddd']
                    }
                },
                series: [{  //系列列表 type系列类型
                    name: '销量', //系列名称——悬浮——弹框出现
                    type: 'bar', //图标系列类型柱状图或条形图 line折线图
                    label: { 
                        normal: { 
                            show: true,
                            color: '#000',
                            fontSize: 14,
                            position: 'outside',
                            formatter: '{c}'
                        }
                    },
                    itemStyle: {  //图形的颜色
                        // color: 'orange', //柱状条的颜色
                        color: { 
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{ 
                                offset: 0,
                                color: 'red' // 0% 处的颜色
                            }, { 
                                offset: 1,
                                color: 'blue' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        },
    
                        // barBorderRadius: 20, //圆角
                        // borderColor: 'green', //柱状条描边的颜色
                        // borderWidth: 1,
                    },
                    // showBackground: true, //显示背景颜色
                    // backgroundStyle: { //柱条的背景颜色
                    // color: 'rgba(180,180,180,.2)'
                    // },
    
                    //高亮的图形样式和标签样式
                    emphasis: {  //悬浮到柱状条 显示的高亮状态
                        lable: { 
                            fontSize: 18
                        },
                        itemStyle: { 
                            color: 'orange'
                        }
                    },
    
                    //柱条的宽度 不设自适应
                    barWidth: 40,
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };
            //把配置项呈现在图标上
            myChart.setOption(option);
        </script>
    </body>
    
    </html>

[20210623162416593.gif_pic_center]: /images/20221005/676677ab393243ea9afff7edbae7cb1c.png