01、echart的基本使用

喵喵酱仔__

已于 2024-09-02 13:44:45 修改

阅读量685

点赞数 17

分类专栏： echarts 新文章标签： vue.js 前端

于 2024-09-02 11:37:25 首次发布

本文链接：https://blog.csdn.net/qq_38210427/article/details/141815713

版权

echarts 新专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一为什么使用echarts

丰富的可视化类型（柱状图、散点图、雷达图…）

多种数据格式无需转换直接使用

千万数据的前端展现移动端优化

多渲染方案，跨平台

动态数据

绚丽的特效

二echarts快速上手

在这里插入图片描述

方式一：

从gi thup中下载echarts

获取echarts.js 和 echarts.min.js

引入到j s文件当中

在这里插入图片描述

方式二

在这里插入图片描述

外网才能使用url，内网要把代码下载下来使用

二快速上手

在这里插入图片描述

三配置

在这里插入图片描述

3.1 title配置

在这里插入图片描述

<!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 id="echs" style="width: 300px; height:200px"></div>
    <script>
        var idEchs = document.getElementById("echs")
        var ehc = echarts.init(idEchs)
        console.log(ehc)
        var options = {
            title:{
                text: 'hello world',
                subtext: '你好世界',
                textStyle:{
                    color:'red'
                }
            }
        }
        ehc.setOption(options)
     </script>
</body>
</html>

在这里插入图片描述

1 Link:点击跳转到百度

案例：

2标题居中

le f t向左偏移

te xtalign: 居中

在这里插入图片描述

3.2 坐标轴和标题

在这里插入图片描述

3.2.1 直角坐标系中的 x/y 轴

在这里插入图片描述

3.2.2 案例1

在这里插入图片描述

tit le居中显示： le f t:50%, textAlign:‘center’ // 文字居中

<!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 id="echs" style="width: 800px; height:600px"></div>
    <script>
        var idEchs = document.getElementById("echs")
        var ehc = echarts.init(idEchs)
        var options = {
            title:{
                text:"衣服销量",
                textStyle:{
                    color:'red',
                    fontSize:14
                },
                subtext:'衣服销量',
                subtextStyle:{
                    fontSize:10 
                },
                left:'50%',//位置居中对齐
                textAlign:'center' // 文字居中
            },
            xAxis:{
                type:'category',
                data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子'],
            },
            yAxis:{
                type:'value',
            },
            series:[{
                type:'bar',
                data:[120,200,150,90,75,110]
            }]
        }
        ehc.setOption(options)
     </script>
</body>
</html>

3.2.3 案例2

在这里插入图片描述

1axisLine里边设置箭头：数组【上箭头+ 下箭头】，箭头偏移

在这里插入图片描述

2。axisTick：刻度线

3 axisLabel：刻度标题朝里边“

在这里插入图片描述

4 min:50,// y轴以50开头

5刻度线在中间显示

在这里插入图片描述

6 na me 标题

在这里插入图片描述

8 offset 轴线与内容进行偏移

在这里插入图片描述

<!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 id="echs" style="width: 800px; height:600px"></div>
    <script>
        var idEchs = document.getElementById("echs")
        var ehc = echarts.init(idEchs)
        var options = {
            title:{
                text:"Echarts 扩展",
                textStyle:{
                    // 支持rgb rgba 十六进制
                    color:'rgb(255,0,255)',
                    fontSize:18
                },
                borderColor:'blue',
                borderWidth:2,
                borderRadius:5,
                subtext:'副标题',
                // subtextStyle:{
                //     fontSize:10 
                // },
                left:'50%'
            },
            xAxis:{
                type:'category',
                data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子'],
                axisLine:{//坐标轴轴线（包括箭头）
                    show:true,
                    symbolOffset:[0,10],
                    //轴线两边的箭头的偏移，如果是数组，第一个数字表示起始箭头的偏移，第二个数字表示末端箭头的偏移；如果是数字，表示这两个箭头使用同样的偏移。
                    symbol:['none','arrow']
                    //默认不显示箭头，即 'none'。两端都显示箭头可以设置为 'arrow'，只在末端显示箭头可以设置为 ['none', 'arrow']。
                },
                axisTick:{//刻度
                    alignWithLabel:true // 刻度线放在柱状图中间
                },
                axisLabel:{ //刻度标签
                    rotate:30 // 刻度文字旋转30度
                },
                name:'衣服品类', // 标题 
                nameTextStyle:{
                    color:'green',
                    fontSize:18,
                },
                nameRotate:-20, //旋转
                nameLocation:'center',
                offset:5, //偏移 往下移动
                nameGap:30 //坐标轴名称与轴线之间的距离。
            },
            yAxis:{
                type:'value',
                name:'销量/个',
                nameTextStyle:{ //y轴标题
                    color:'blue',
                    fontWeight:600,
                    borderWidth:1,
                    borderColor:'green',
                    borderType:'dashed',// 虚线
                    borderRadius:10,
                    padding:5,
                    align:'center'
                },
                axisLine:{ // 坐标轴
                    show:true,
                    symbolOffset:[0,10], // 箭头往上偏移10 
                    symbol:['none','arrow'] // 添加箭头， 只让有一个上箭头
                },
                axisTick:{ // 添加刻度线
                    show:true，
                    //length:10 边长
                },
                axisLabel:{ // 刻度标签 ：文字
                    // inside: true 刻度文字 朝里
                    color:'rgb(255,0,255)'
                },
                min:50,// 以50开头
                offset:5 // 刻度线偏移5
            },
            series:[{
                type:'bar',
                data:[120,200,150,90,75,110]
            }]
        }
        ehc.setOption(options)
     </script>
</body>
</html>

4 公共样式设置

颜色主题（Theme）

调色盘

直接样式设置（itemStyle、lineStyle、areaStyle、label、…）

高亮显示emphasis

4.1 颜色主题

在这里插入图片描述

如果是da r k 的话：
在这里插入图片描述

除了这两种，还可以配置其他主题

2 下载主题：

https://echarts.apache.org/zh/theme-builder.html

在这里插入图片描述

选在一个主题后，下载主题

在这里插入图片描述

引入进行j s,以j s的名字命名：

在这里插入图片描述

4.2 调色盘

在这里插入图片描述

每一个的颜色：用数组进行设置

在opotion中添加color: 是一个数组，可以是多个

柱状图只取第一个，再在series中配置一个属性可以取多个

饼图都取

柱状图不设置colorBy:‘data’ 默认取颜色数组中的第一个，设置的话是随机的

  color:["#eee","rgb(255,255,255)","yellow"],

在这里插入图片描述

4.3 调色盘- 渐变色

在这里插入图片描述

4.4 综合案例

在这里插入图片描述

<!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 id="echs" style="width: 800px; height:600px"></div>
    <script>
        var idEchs = document.getElementById("echs")
        var ehc = echarts.init(idEchs)
        var options = {
            title:{
                text:"Echarts 扩展",
                textStyle:{
                    // 支持rgb rgba 十六进制
                    color:'rgb(255,0,255)',
                    fontSize:18
                },
                borderColor:'blue',
                borderWidth:2,
                borderRadius:5,
                subtext:'副标题',
                // subtextStyle:{
                //     fontSize:10 
                // },
                left:'50%'
            },
            color:["#eee","black",
                {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [{
                    offset: 0, color: 'red' // 0% 处的颜色
                }, {
                    offset: 1, color: 'blue' // 100% 处的颜色
                }],
                global: false // 缺省为 false
            },"yellow","red"
            
        ],
            xAxis:{
                type:'category',
                data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子'],
                axisLine:{
                    show:true,
                    symbolOffset:[0,10],
                    symbol:['none','arrow']
                },
                axisTick:{
                    alignWithLabel:true
                },
                axisLabel:{
                    rotate:30
                },
                name:'衣服品类',
                nameTextStyle:{
                    color:'green',
                    fontSize:18,
                },
                nameRotate:-20,
                nameLocation:'center',
                offset:5,
                nameGap:30
            },
            yAxis:{
                type:'value',
                name:'销量/个',
                nameTextStyle:{
                    color:'blue',
                    fontWeight:600,
                    borderWidth:1,
                    borderColor:'green',
                    borderType:'dashed',
                    borderRadius:10,
                    padding:5,
                    align:'center'
                },
                axisLine:{
                    show:true,
                    symbolOffset:[0,10],
                    symbol:['none','arrow']
                },
                axisTick:{
                    show:true
                },
                axisLabel:{
                    color:'rgb(255,0,255)'
                },
                min:50,
                offset:5
            },
            series:[{
                type:'bar',
                colorBy:"data",
                data:[120,200,150,90,75,110]
            }]
        }
        ehc.setOption(options)
     </script>
</body>
</html>

4.5 直接样式设置

在这里插入图片描述

4.5.1 itemStyle

在这里插入图片描述

让第二项变成红色，其他项都变成黄色：

在这里插入图片描述

4.5.2 线样式设置

在这里插入图片描述

4.5.3 高亮

在这里插入图片描述

针对所有柱子：

在这里插入图片描述

针对某一个柱子：

在这里插入图片描述

四课后练习

贴图工具：https://zh.snipaste.com/

在这里插入图片描述

1 基本配置

在这里插入图片描述

背景图：深蓝backgroundColor:‘#0e205d’
标题：居中对齐 left:50%
a xisLine 刻度线：里边可以设置箭头（分上下两个箭头，只显示上箭头 symbol:[‘none’,“arrow”],），

设置箭头偏移量 symbolOffset:[0,10]
color 渐变颜色：从文档中直接复制对象：只需要修改【两个】颜色
柱状图宽度 bar width , 圆角，阴影（有模糊程度）
Label : 位置 position:top 往上偏移 di stance:20

设置背景（椭圆【设置宽高】，文字居中对齐）

backgroundColor:‘#102d6a’,
width:30,
height:30,
lineHegiht:30,
align:‘center’,
verticalAlign:‘middle’,
borderRadius:30,
分割线 splitLine

在这里插入图片描述

刻度标签

在这里插入图片描述

2 代码

<!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 id="echs" style="width: 800px; height:600px"></div>
    <script>
        var idEchs = document.getElementById("echs")
        var ehc = echarts.init(idEchs)
        var options = {
            backgroundColor:'#0e205d', // 添加背景色
            title:{ //标题
                text:"办公室杂项",
                left:'50%', // 位置居中
                textAlign:'center',// 文字居中
                textStyle:{
                    color:'white',
                }
            },
            xAxis:{
                type:'category',
                axisLine:{  
                    show:true,
                    symbol:['none',"arrow"],
                    symbolOffset:[0,10]
                },
                data:["工作票","操作票","抢修","用电调查","设备巡视","现场勘察","到岗到位"],
                axisLabel:{
                    color:'white',
                    margin:10,
                    fontSize:16
                },
            },
            yAxis:{
                type:'value',
                // 坐标设置
                axisLine:{ // 添加箭头， 并且让箭头偏移10
                    show:true,
                    symbol:['none',"arrow"],
                    symbolOffset:[0,10]
                },
                // 坐标轴标签设置：文字
                axisLabel:{
                    color:'white'
                },
                // 里边刻度线的样式 
                splitLine:{
                    lineStyle:{
                        color:'#20376d'
                    }
                }
            },
            color:[{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#00f1fd' // 0% 处的颜色
            }, {
                offset: 1, color: '#1f45a4' // 100% 处的颜色
            }],// 渐变色
            global: false // 缺省为 false 
            }],
            series:[{
                type:'bar',
                data:[300,450,770,203,255,188,156],
                barWidth:20, //柱状图宽度
                itemStyle:{  
                    borderRadius: 20,  // 变成圆角
                    shadowColor:'#1f45a4', // 添加阴影
                    shadowBlur:4 //模糊大小
                },
                label:{ //柱状图标签
                    show:true,
                    position: 'top',
                    backgroundColor:'#102d6a',
                    width:30,
                    height:30,
                    lineHegiht:30,
                    align:'center',
                    verticalAlign:'middle',
                    borderRadius:30,
                    distance:20 
                }
            }]
        }
        ehc.setOption(options)
     </script>
</body>
</html>