Eachers知识总结

最新推荐文章于 2023-08-07 16:46:11 发布

爱你孤身走安详

最新推荐文章于 2023-08-07 16:46:11 发布

阅读量1k

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/linlinaitangtang/article/details/127557946

版权

eachers的网址：

Apache ECharts

定义;

1.一个可以使用javascript实现的开源可视化库。

2.依赖轻量级的矢量图像库，提供直观，交互丰富，可高度个性化定制的数据可视化图标。

3.在html中使用前要先引入js文件

<script src="./js/echarts.min.js"></script>

使用：

1.series：系列

2.tooltip：提示

3.legend:图例

4.xAxis:x轴

5.yAxis:y轴

echarts的优点：

1.国人开发，文档全。便于开发和阅读文档。

2.图标丰富，可以使用于各种各样的功能

实例：

颜色修改：

1.主题：自定义主题 linght,dark浅色与深色。

2.自定义主题

3.color：调色盘

4.itemStyle normal:默认emphasis 强调状态

实例：

特别样式：

1.渐变：

运行：

1.其中的title tootip. legend .xAxis.yAxis. series等都是固定的

<body>
    <div id="container">
    </div>
</body>
   <script src="./js/echarts.min.js"></script>
<script>
    //定义渐变
    var linear = {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0,
                color: '#02bcff' // 0% 处的颜色
            }, {
                offset: 1,
                color: '#5555ff' // 100% 处的颜色
            }],
            global: false // 缺省为 false
        }
        //04实例化echarts
        // 4.1创建—个实例
    // var echart = echarts.init(document.getElementById("container"))
        var echart = echarts.init(document.getElementById("container"), 'macarons')
        //4.2定义配置项
    var option = {
            //调色盘
            // color: ['#000', '#55007f', "#f70"],
            //图标的标题
            title: {
                text: "潭总睡眠图标"
            },
            //图表的提示
            tooltip: {},
            //图例
            legend: {
                data: ["睡眠时长", "游戏时长", "建筑时长", "吃饭数量", ]
            },
            //x轴线
            xAxis: {
                data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
            },
            // y轴线
            yAxis: {},
            // backgroundStyle: {
            //     color: 'rgba(0,0,255,0.2)'
            // },
            //设置数据
            series: [{
                    //数据名称
                    name: "睡眠时长",
                    // 类型为柱状图
                    type: "bar",
                    //数据data
                    data: [8, 10, 4, 5, 9, 4, 8],
					itemStyle:{
						color:linear,
						borderRadius:[30,30,0,0]
					},
                    color: linear,
                    backgroundStyle: {
                        color: "rgba(180,180,180,0.2)"
                    },
                }, {
                    //数据名称
                    name: "玩游戏时间",
                    //类型为柱状图
                    type: "line",
                    //数据data
                    data: [3, 5, 4, , 7, 6, 5, 10],
                    areaStyle: ["#000"]
                }, {
                    //数据名称
                    name: "上课时间",
                    //类型为柱状图
                    type: "line",
                    smooth: true,
                    //数据data
                    data: [5, 5, 4, , 5, 6, 7, 4]
                }, {
                    name: "成绩",
                    //饼形图
                    type: "pie",
                    radius: [80, 50],
                    //位移
                    left: -80,
                    top: -270,
                    //数据
                    data: [{
                        name: "谭总",
                        value: 90,
                        itemStyle: {
                            color: "#ffaa00",
                        },
                    }, {
                        name: "韩佬",
                        value: 80,
                        itemStyle: {
                            color: "#93da6c",
                        },
                    }, {
                        name: "骚哥",
                        value: 89
                    }, {
                        name: "康佬",
                        value: 63,
                        itemStyle: {
                            color: "#bcff57"
                        }
                    }, ]
                }

            ]
        }
    echart.setOption(option);
</script>

执行结果：