Echarts的使用

卷心菜111

已于 2023-10-10 18:00:51 修改

阅读量49

点赞数 1

文章标签： echarts 前端 javascript

于 2023-10-10 17:10:07 首次发布

本文链接：https://blog.csdn.net/m0_71026050/article/details/133751511

版权

学习目标：

掌握 echarts的用法

学习内容：

下载安装引入echarts
入门案例
echarts常用参数总结

学习时间：

周二16:30-18:00

学习产出：

一、下载安装

步骤：
1、进入官网
https://echarts.apache.org/zh/index.html
在这里插入图片描述

这个用不了可以找资源，如：https://blog.csdn.net/m0_62617719/article/details/129416206

将下载的压缩包解压到存放位置即可
在这里插入图片描述

二、入门案例

1、引入Echarts

<script src = "echarts-5.4.1/dist/echarts.js"></script>

2、准备容器

<div id = "main" style = "width: 600px;height:400px;" ></div>

3、使用Echarts绘制一个简单的图表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = "echarts-5.4.1/dist/echarts.js"></script>
</head>
<body>
<div id = "main" style = "width: 600px;height:400px;" ></div>
<script>
     let oDiv = document.querySelector('div')
        var mCharts = echarts.init(oDiv);
        var option = {
            xAxis: {
                type: 'category',
                name: '姓名',
                nameLocation: 'start',
                data: ['张三', '李四', '王五', '二嘎', '闰土', '铁蛋', '史珍香', '狗娃']
            },
            yAxis: {
                name: '得分',
                nameLocation: 'start',
                type: 'value'
            },
            series: [{
                name: '语文',
                type: 'bar',
                data: [65, 78, 98, 100, 59, 86, 76, 89.5]
            }]
        }
        mCharts.setOption(option)
</script>
</body>
</html>

运行效果
在这里插入图片描述

三、常用参数

参考：
1、https://blog.csdn.net/qq_38951259/article/details/128207995
2、https://blog.csdn.net/weixin_54410967/article/details/115958449
3、https://baijiahao.baidu.com/s?id=1777703127224134509&wfr=spider&for=pc
全图默认背景

backgroundColor: ‘rgba(0,0,0,0)’,

默认色板

color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
    '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0',
    '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
    '#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],

图标标题

title: {
    x: 'left',        // 水平安放位置，默认为左对齐，可选为：
                      // 'center' ¦ 'left' ¦ 'right'
                      // ¦ {number}（x坐标，单位px）
    y: 'top',         // 垂直安放位置，默认为全图顶端，可选为：
                      // 'top' ¦ 'bottom' ¦ 'center'
                      // ¦ {number}（y坐标，单位px）
    //textAlign: null          // 水平对齐方式，默认根据x设置自动调整
    backgroundColor: 'rgba(0,0,0,0)',
    borderColor: '#ccc',          // 标题边框颜色
    borderWidth: 0,           // 标题边框线宽，单位px，默认为0（无边框）
    padding: 5,             // 标题内边距，单位px，默认各方向内边距为5，
                              // 接受数组分别设定上右下左边距，同css
    itemGap: 10,             // 主副标题纵向间隔，单位px，默认为10，
    textStyle: {
        fontSize: 18,
        fontWeight: 'bolder',
        color: '#333'                             // 主标题文字颜色
    },
    subtextStyle: {
        color: '#aaa'                            // 副标题文字颜色
    }
},