Echarts 配置项

- 代码
- 效果图

echarts.min.js 文件需要另外下载

代码

<!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/echarts.min.js"></script>
    </head>
    <body>
        <div class="mychart" style="width: 600px; height: 400px"></div>
        <script>
            let myEcharts = echarts.init(document.querySelector('.mychart'))
            let arr = [800, 900, 960, 1000, 600]
            let option = {
                title: {
                    text: '柱状图',
                },
                tooltip: {
                    padding: 20, // 提示框的内边距
                },
                legend: {
                    right: 'right',
                },
                toolbox: {
                    show: true,
                },
                grid: {
                    show: true, //显示直角坐标系网格
                },
                xAxis: {
                    type: 'category', // category 类目轴（离散类目数据），可自动 series.data 或 dataset.source  中获取数据，或者可通过 xAxis.data 设置类目数据
                    data: ['一月', '二月', '三月', '四月', '五月'], //类目数据
                },
                yAxis: {
                    type: 'value', // 数据轴（连续数据）
                },
                series: [
                    {
                        data: arr,
                        type: 'bar', // 图表类型
                        name: '开支-柱状图',
                    },
                    {
                        data: arr,
                        type: 'line', // 图表类型
                        name: '开支-折线图',
                    },
                ],
                color: ['skyblue', 'blue'],
            }

            myEcharts.setOption(option)
        </script>
    </body>
</html>

效果图

在这里插入图片描述

原文链接：https://blog.csdn.net/qq_51634332/article/details/118060253