关于echarts

木一叶liuyue

已于 2022-09-03 16:18:46 修改

阅读量83

点赞数

分类专栏：前段文章标签： echarts javascript ecmascript

于 2022-09-02 22:01:51 首次发布

本文链接：https://blog.csdn.net/Kerryliuyue/article/details/126670600

版权

前段专栏收录该内容

47 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <!-- <script src="echarts.js"></script> -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 1600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

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

            title: {
                text: 'ECharts 入门示例'
            },
            //鼠标hover时候的提示框
            tooltip: {
                trigger: 'axis', //触发类型；轴触发，axis表示鼠标hover一条竖线显示全部数据，item表示点击某个折线点显示相应数据
                axisPointer: {
                    type: 'cross',//默认为line，line直线，cross十字准星，shadow阴影
                    crossStyle: {
                        color: 'red'
                    }
                }
            },
            //样例标识（data需要和series中的那么相同，才会显示）
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},

            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, {
                        value: 43,
                        // 设置单个柱子的样式
                        itemStyle: {
                            color: '#91cc75',
                            shadowColor: '#91cc75',
                            borderType: 'dashed',
                            opacity: 0.5
                        }
                    }, 10, 10, 20],
                    barWidth: '40%',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(220, 220, 220, 0.8)'
                    },
                    stack: 'x'//堆叠柱状图
                },
                {
                    data: [10, 22, 28, 43, 49],
                    type: 'bar',
                    stack: 'x'
                },
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <!-- <script src="echarts.js"></script> -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 1600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                trigger: 'item',
                axisPointer: { type: 'cross' }
            },
            legend: {
                //必须与series中的name相同
                data: ['降水量', '温度']
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true//x轴分割线的位置
                    },
                    data: [
                        '1月',
                        '2月',
                        '3月',
                        '4月',
                        '5月',
                        '6月',
                        '7月',
                        '8月',
                        '9月',
                        '10月',
                        '11月',
                        '12月'
                    ]
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '降水量',
                    min: 0,
                    max: 250,
                    position: 'right',
                    axisLabel: {
                        formatter: '{value} ml'
                    }
                },
                {
                    type: 'value',
                    name: '温度',
                    min: 0,
                    max: 25,
                    position: 'left',
                    axisLabel: {
                        formatter: '{value} °C'
                    }
                }
            ],
            series: [
                {
                    name: '降水量',
                    type: 'bar',
                    yAxisIndex: 0,
                    data: [6, 32, 70, 86, 68.7, 100.7, 125.6, 112.2, 78.7, 48.8, 36.0, 19.3]
                },
                {
                    name: '温度',
                    type: 'line',
                    symbol: 'none', //这句就是去掉点的
                    //   smooth: true,//让折线变平滑的
                    yAxisIndex: 1,//在yAxis 中写入两组数据，使用 yAxisIndex 属性设置系列与哪个y 轴相关联

                    data: [
                        6.0,
                        10.2,
                        10.3,
                        11.5,
                        10.3,
                        13.2,
                        14.3,
                        16.4,
                        18.0,
                        16.5,
                        12.0,
                        5.2
                    ],
                    lineStyle: {
                        normal: {
                            color: 'green',
                            width: 4,
                            type: 'dashed'//设置线的类型 虚线(dashed)、实线(solid)
                        }
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>