project-static-sh
/
常用Echarts设置.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="./lib/echarts.min.js"></script>
    <style>
        #main {
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM  图形绘制的尺寸 会根据 容器的大小改变 -->
    <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">
        /*
          核心步骤:
          1. 初始化 (根据需求传入不同的dom元素)
          2. 设置选项
          3. 基于选项渲染图表 (基本是固定的)
        */
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.querySelector('#main'))

        // 指定图表的配置项和数据
        var option = {
            // 标题
            title: {
                // 文本
                text: '美食排行榜',
                // 样式
                textStyle: {
                    color: 'yellowgreen',
                    fontSize: 30
                },
                // 位置 left top bottom
                right: 0
            },
            // 提示框
            tooltip: {
                show: false // 默认是显示
            },
            // 图例 图形顶部的 选项
            legend: {
                data: ['热度'],
                bottom: 0,
                // 图例的样式
                itemStyle: {
                    // 设置具体的颜色
                    // color: 'orange'
                    // 渐变色 可以设置颜色的渐变效果
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'red' // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'yellow' // 100% 处的颜色
                            }
                        ],
                        global: false // 缺省为 false
                    }
                }
            },
            // 绘图网格 可以设置图形的位置等
            grid: {
                // 左侧的距离
                // left: 50,
                // // 顶部的距离
                // top: '50%'
            },
            // x轴的设置
            xAxis: {
                data: ['西兰花', '西红柿', '西葫芦', '西北风', '西梅', '冬瓜'],
                // 文字大小
                axisLabel: {
                    fontSize: 14
                }
            },
            // y轴的设置
            yAxis: {
                // y轴的线段
                axisLine: {
                    // 显示
                    show: true,
                    // 线段的样式
                    lineStyle: {
                        // 颜色
                        color: 'blue',
                        // 粗细
                        width: 2
                    }
                }
            },
            // 图形的 类型 可以设置多个图
            series: [
                // 数据 名字 类型
                {
                    name: '热度',
                    type: 'bar', // 图的类型 bar 柱状图 pie 饼图
                    data: [998, 200, 300, 400, 100, 520]
                }
                // {
                //   name: '热度',
                //   type: 'pie', // 图的类型 bar 柱状图 pie 饼图
                //   data: [998, 200, 300, 400, 100, 520]
                // }
            ]
        }

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

</html>