02、基本轴的使用

喵喵酱仔__

已于 2024-09-03 16:41:09 修改

阅读量461

点赞数 5

分类专栏： echarts 新文章标签： android javascript 开发语言

于 2024-09-02 14:00:16 首次发布

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

版权

echarts 新专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一数据集

在这里插入图片描述

案例：

在这里插入图片描述

三种编写数据的方式：

第一种最常用【多维数组】

在这里插入图片描述

<!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="ec" style="width:600px;height:400px"></div>
</body>
<script>
    var ech = document.getElementById("ec")
    var myCh = echarts.init(ech)
    var options = {
        legend:{},
        xAxis:{
            type:'category',
            data:["第一季度","第二季度","第三季度"]
        },
        yAxis:{},
        series:[{
            type:'bar',
            name:'裤子',
            data:[45,85,95]
        },{
            type:'bar',
            name:'衬衫',
            data:[82,73,54]
        },{
            type:'bar',
            name:'毛衣',
            data:[85,66,98]
        },{
            type:'bar',
            name:'t-shit',
            data:[73,55,25]
        }]
    }
    // 第二种 dataset
    // var options = {
    //     legend:{},
    //     xAxis:{
    //         type:'category',
    //     },
    //     yAxis:{},
    //     dataset:{
    //         source: [
    //             ['product', '裤子', '衬衫', '毛衣', 't-shit'],
    //             ['第一季度', 43.3, 85.8, 93.7,88],
    //             ['第二季度', 83.1, 73.4, 55.1,66],
    //             ['第三季度', 86.4, 65.2, 82.5,77]
    //         ]
    //     },
    //     series:[{
    //         type:'bar'
            
    //     },{
    //         type:'bar'
           
    //     },{
    //         type:'bar'
            
    //     },{
    //         type:'bar'
    //     }]
    // }
    // var options = {
    //     legend:{},
    //     dataset: {
    //         dimensions: ['product', '裤子', '衬衫', '毛衣'],
    //         source: [
    //         { product: '第一季度', '裤子': 43.3, '衬衫': 85.8, '毛衣': 93.7 },
    //         { product: '第二季度', '裤子': 83.1, '衬衫': 73.4, '毛衣': 55.1 },
    //         { product: '第三季度', '裤子': 86.4, '衬衫': 65.2, '毛衣': 82.5 },
    //         ]
    //     },
    //     xAxis: { type: 'category' },
    //     yAxis: {},
    //     series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
    // }
    myCh.setOption(options)
</script>
</html>

二 legend图例组件

在这里插入图片描述

Align: 文字和图标的【左右顺序】
selected:‘false’ 默认不让点击
selectedMode :‘single’ 每次只能展示一个图例

selectedMode :‘multiple’ 可以展示多个图例，默认就是多个
selector。出现额外的【选项按钮】：全选，反选

案例：

在这里插入图片描述

多维：

拼接文字：【裤子】销售榜单。formatter
lengend默认选中【衬衫】其他不选中，每次只显示一个柱状图

selected:{
‘裤子’:false,
‘衬衫’:true,
‘毛衣’:false
},
selectedMode:‘single’,
靠右显示： left:‘right’,
分页【添加滚动+ 高度】

legend:{
type:‘scroll’,
height:90,
orient:‘vertical’,

}
selector：出现额外的【选项按钮】：全选，反选
设置文字 data:[“裤子”,{name:“衬衫”,textStyle:{color:“red”}},“毛衣”],

<!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="ec" style="width:600px;height:400px"></div>
</body>
<script>
    var ech = document.getElementById("ec")
    var myCh = echarts.init(ech)
    var options = {
        legend:{
            type:'scroll',
           selected:{
            '裤子':false,
            '衬衫':true,
            '毛衣':false
           },
           left:'right',
           height:90,
           formatter: function (name) {
                return  name+'销量榜单'
            },
           orient:'vertical',
           selectedMode:'single',
           data:["裤子",{name:"衬衫",textStyle:{color:"red"}},"毛衣"],
           selector: [
    {
        type: 'all or inverse',
        // 可以是任意你喜欢的 title
        title: '全选'
    },
    {
        type: 'inverse',
        title: '反选'
    }
]
        },
        color:['red',"yellow","blue"],
        xAxis:{
            type:'category',
            data:["第一季度","第二季度","第三季度"]
        },
        yAxis:{},
        series:[{
            type:'bar',
            name:'裤子',
            data:[45,85,95]
        },{
            type:'bar',
            name:'衬衫',
            data:[82,73,54]
        },{
            type:'bar',
            name:'毛衣',
            data:[85,66,98]
        }]
    }
    myCh.setOption(options)
</script>
</html>

三tooltip提示框组件

在这里插入图片描述

trigger:‘axis’ , 一次性显示【全部】的类目数据
triggerOn:‘mou rseover’, 移到上边进行【显示】
a xi o sPointer. 是给【某一个轴】设置具体的图例

3.1 trigger

1.trigger：触发类型：坐标轴触发，可选：‘axis’ 坐标轴触发，‘item’ 数据项触发

2.axisPointer{ // 坐标轴指示器配置项
type: ‘shadow’ // 指示器类型：‘shadow’ 阴影，可选：‘line’ 直线，‘shadow’ 阴影

}

在这里插入图片描述

3.2 修改 ECharts tooltip 弹框的样式

要修改 ECharts tooltip 弹框的样式，可以通过 tooltip 配置项来实现，具体步骤如下：

找到需要修改的 tooltip 的样式属性，比如背景色、边框颜色、字体颜色等；
在 ECharts 配置项中找到 tooltip 配置项，通过设置 tooltip 的属性值来修改样式，例如：

tooltip: {
  backgroundColor: 'rgba(0,0,0,0.8)',
  borderColor: '#ccc',
  borderWidth: 1,
  textStyle: {
    color: '#fff'
  }
}

在这里插入图片描述

上面的代码将 tooltip 的背景色设置为深色不透明，边框颜色为灰色，边框宽度为 1，字体颜色为白色。

3.3. 根据需求修改 tooltip 样式的其它属性，例如设置阴影、调整边框半径等。

注意：tooltip 样式的修改会影响所有的 tooltip 弹框，如果需要对特定的 tooltip 进行样式定制，可以通过 formatter 函数来实现。具体做法是在 tooltip 配置项中定义 formatter 函数，然后在函数中根据数据动态生成 tooltip 内容和样式。例如：

tooltip: {
  formatter: function(params) {
    return '<div style="background-color: #fff; border: 1px solid #ccc; padding: 10px">' + 
    '<span style="font-weight: bold">' + params.name + '</span>: ' + params.value +
    '</div>';
  }
}

上面的代码将 tooltip 的内容和样式定制为一个白色背景的盒子，里面包含当前鼠标所在点的名称和数值

案例：echarts修改tooltip默认样式（使用formatter函数拼接加工）

默认tooltip样式图
在这里插入图片描述
修改过后的tooltip样式图

option = {
  xAxis: [
    {
      type: 'category', // 类别
      data: ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白龙马", "白骨精", "狐狸精"], // x轴类别对应的值
      splitLine: {
        // 网格线配置
        show: true,
        lineStyle: {
          color: ['#e9e9e9'],
          width: 1,
          type: 'solid'
        }
      } // 给x轴加上网格线
    }
  ],
  yAxis: {
    type: 'value',
    splitLine: {
      // 网格线配置
      show: true,
      lineStyle: {
        color: ['#e9e9e9'],
        width: 1,
        type: 'solid'
      }
    }, // 给y轴加上网格线
    axisLabel: {
      formatter: function (value, index) {
        return value + '分';
      }
    }
  },
  tooltip: {
    trigger: 'axis', // 鼠标移入到柱子里面就会有一个提示，默认是item方式，如果有多个柱状图，堆在一块item就不太好了，个人喜欢axis方式的
    triggerOn: 'mousemove', // 什么时候触发提示小图标，点击click的时候，或者鼠标滑过的时候，默认是mousemove鼠标滑过
    /* formatter可以以字符串模板方式写，也可以用回调函数写，不过字符串模板略有限制，我们使用回调函数会灵活点 */
    formatter: function (params) {
      console.log('--x轴类目对应的参数数组--', params); // 比如当鼠标hover到孙悟空同学这一列的时候，这个params数组存放的每一项数据分别是语数外三门成绩的具体信息
      var res = // 字符串形式的html标签会被echarts转换渲染成数据，这个res主要是画的tooltip里的上部分的标题部分
        "<div style='margin-bottom:5px;padding:0 12px;width:100%;height:24px;line-height:24px;background:pink;border-radius:3px;'><p>" +
        params[0].name +
        ' </p></div>';
      for (var i = 0; i < params.length; i++) {
        //因为是个数组，所以要遍历拿到里面的数据，并加入到tooltip的数据内容部分里面去
        res += `<div style="color: #fff;font-size: 14px; padding:0 12px;line-height: 24px">
                  <span style="display:inline-block;margin-right:5px;border-radius:2px;width:10px;height:10px;background-color:${[
                    params[i].color // 默认是小圆点，我们将其修改成有圆角的正方形，这里用的是模板字符串。并拿到对应颜色、名字、数据
                  ]};"></span>
                  ${params[i].seriesName}
                  ${params[i].data}分
                </div>`;
      }
      return res; // 经过这么一加工，最终返回出去并渲染，最终就出现了我们所看的效果
    }
  },
  legend: {
    // legend 是对series进行筛选，所以data中每一项就是series中的每一项的标识，所以就是以name为标识
    data: ['语文成绩', '数学成绩', '英语成绩']
  },
  series: [
    {
      name: '语文成绩',
      data: [115, 198, 88, 77, 99, 123, 36],
      type: 'bar', // 类型为柱状图
      barWidth: 40, // 柱状图的宽度
      label: {
        // 展示具体柱状图的数值
        show: true
      },
      barGap: '0',
      /*
              注意，如果想要把数据堆在一块，堆叠放置，只需要在series数组中的每个对象中都加入stack属性，stack英文单词的释义是：
              一叠，一摞，一堆的意思，设置stack的属性值是什么倒无所谓，但是要让其stack的属性值保持一致，保持一致，才会堆叠到一块。
            */
      stack: '值无所谓，但要保持一致'
    },
    {
      name: '数学成绩',
      data: [88, 89, 77, 66, 100, 145, 53],
      type: 'bar', // 类型为柱状图
      barWidth: 40, // 柱状图的宽度
      label: {
        // 展示具体柱状图的数值
        show: true
      },
      /*
              注意，如果想要把数据堆在一块，堆叠放置，只需要在series数组中的每个对象中都加入stack属性，stack英文单词的释义是：
              一叠，一摞，一堆的意思，设置stack的属性值是什么倒无所谓，但是要让其stack的属性值保持一致，保持一致，才会堆叠到一块。
            */
      stack: '值无所谓，但要保持一致'
    },
    {
      name: '英语成绩',
      data: [18, 55, 42, 63, 77, 85, 58],
      type: 'bar', // 类型为柱状图
      barWidth: 40, // 柱状图的宽度
      label: {
        // 展示具体柱状图的数值
        show: true
      },
      /*
              注意，如果想要把数据堆在一块，堆叠放置，只需要在series数组中的每个对象中都加入stack属性，stack英文单词的释义是：
              一叠，一摞，一堆的意思，设置stack的属性值是什么倒无所谓，但是要让其stack的属性值保持一致，保持一致，才会堆叠到一块。
            */
      stack: '值无所谓，但要保持一致'
    }
  ]
};

vue代码

<template>
  <div class="echartsBox" id="main"></div>
</template>

<script>
export default {
  data() {
    return {
      xData: ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白龙马", "白骨精", "狐狸精"],
      yData1: [115, 198, 88, 77, 99, 123, 36],
      yData2: [88, 89, 77, 66, 100, 145, 53],
      yData3: [18, 55, 42, 63, 77, 85, 58],
      grid: {
        // 网格线配置
        show: true,
        lineStyle: {
          color: ["#e9e9e9"],
          width: 1,
          type: "solid",
        },
      },
    };
  },
  mounted() {
    // 在通过mounted调用让echarts渲染
    this.echartsInit();
  },
  methods: {
    echartsInit() {
      let main = document.getElementById("main"); // 获取dom元素作为eacharts的容器
      this.$echarts.init(main).setOption({
        xAxis: [
          {
            type: "category", // 类别
            data: this.xData, // x轴类别对应的值
            splitLine: this.grid, // 给x轴加上网格线
          },
        ],
        yAxis: {
          type: "value",
          splitLine: this.grid, // 给y轴加上网格线
          axisLabel: {
            formatter: function (value, index) {
              return value + "分";
            },
          },
        },
        tooltip: {
          trigger: "axis", // 鼠标移入到柱子里面就会有一个提示，默认是item方式，如果有多个柱状图，堆在一块item就不太好了，个人喜欢axis方式的
          triggerOn: "mousemove", // 什么时候触发提示小图标，点击click的时候，或者鼠标滑过的时候，默认是mousemove鼠标滑过
          /* formatter可以以字符串模板方式写，也可以用回调函数写，不过字符串模板略有限制，我们使用回调函数会灵活点 */
          formatter: function (params) {
            console.log("--x轴类目对应的参数数组--", params); // 比如当鼠标hover到孙悟空同学这一列的时候，这个params数组存放的每一项数据分别是语数外三门成绩的具体信息
            var res = // 字符串形式的html标签会被echarts转换渲染成数据，这个res主要是画的tooltip里的上部分的标题部分
              "<div style='margin-bottom:5px;padding:0 12px;width:100%;height:24px;line-height:24px;background:pink;border-radius:3px;'><p>" +
              params[0].name +
              " </p></div>";
            for (var i = 0; i < params.length; i++) {
              //因为是个数组，所以要遍历拿到里面的数据，并加入到tooltip的数据内容部分里面去
              res += `<div style="color: #fff;font-size: 14px; padding:0 12px;line-height: 24px">
                  <span style="display:inline-block;margin-right:5px;border-radius:2px;width:10px;height:10px;background-color:${[
                    params[i].color, // 默认是小圆点，我们将其修改成有圆角的正方形，这里用的是模板字符串。并拿到对应颜色、名字、数据
                  ]};"></span>
                  ${params[i].seriesName}
                  ${params[i].data}分
                </div>`;
            }
            return res; // 经过这么一加工，最终返回出去并渲染，最终就出现了我们所看的效果
          },
        },
        legend: {
          // legend 是对series进行筛选，所以data中每一项就是series中的每一项的标识，所以就是以name为标识
          data: ["语文成绩", "数学成绩", "英语成绩"],
        },
        series: [
          {
            name: "语文成绩",
            data: this.yData1,
            type: "bar", // 类型为柱状图
            barWidth: 40, // 柱状图的宽度
            label: {
              // 展示具体柱状图的数值
              show: true,
            },
            barGap: "0",
            /*
              注意，如果想要把数据堆在一块，堆叠放置，只需要在series数组中的每个对象中都加入stack属性，stack英文单词的释义是：
              一叠，一摞，一堆的意思，设置stack的属性值是什么倒无所谓，但是要让其stack的属性值保持一致，保持一致，才会堆叠到一块。
            */
            stack: "值无所谓，但要保持一致",
          },
          {
            name: "数学成绩",
            data: this.yData2,
            type: "bar", // 类型为柱状图
            barWidth: 40, // 柱状图的宽度
            label: {
              // 展示具体柱状图的数值
              show: true,
            },
            /*
              注意，如果想要把数据堆在一块，堆叠放置，只需要在series数组中的每个对象中都加入stack属性，stack英文单词的释义是：
              一叠，一摞，一堆的意思，设置stack的属性值是什么倒无所谓，但是要让其stack的属性值保持一致，保持一致，才会堆叠到一块。
            */
            stack: "值无所谓，但要保持一致",
          },
          {
            name: "英语成绩",
            data: this.yData3,
            type: "bar", // 类型为柱状图
            barWidth: 40, // 柱状图的宽度
            label: {
              // 展示具体柱状图的数值
              show: true,
            },
            /*
              注意，如果想要把数据堆在一块，堆叠放置，只需要在series数组中的每个对象中都加入stack属性，stack英文单词的释义是：
              一叠，一摞，一堆的意思，设置stack的属性值是什么倒无所谓，但是要让其stack的属性值保持一致，保持一致，才会堆叠到一块。
            */
            stack: "值无所谓，但要保持一致",
          },
        ],
      });
    },
  },
};
</script>

<style lang="less" scoped>
.echartsBox {
  width: 900px;
  height: 500px;
}
</style>

案例：

在这里插入图片描述

添加背景阴影：

axisPointer:{
type:‘shadow’
}
拼接文字 formater

<!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="ec" style="width:600px;height:400px"></div>
</body>
<script>
    var ech = document.getElementById("ec")
    var myCh = echarts.init(ech)
    var options = {
        tooltip:{
            trigger:'axis' ,
            triggerOn:'click',
            axisPointer:{
                type:'shadow'
            }
        },
        xAxis:{
            type:'category',
            axisPointer:{
                show:true,
                handle:{
                    show:true
                },
                label:{
                    show:true,
                    formatter:function(r) {
                        console.log(r)
                        return '漂亮的' +r.value
                    }
                } 
            },
            data:["第一季度","第二季度","第三季度"]
        },
        yAxis:{},
        series:[{
            type:'bar',
            name:'裤子',
            data:[45,85,95]
        },{
            type:'bar',
            name:'衬衫',
            data:[82,73,54]
        },{
            type:'bar',
            name:'毛衣',
            data:[85,66,98]
        },{
            type:'bar',
            name:'t-shit',
            data:[73,55,25]
        }]
    }
    myCh.setOption(options)
</script>
</html>

四 grid

在这里插入图片描述


  grid: {
    left: '4.5%',
    right: '2.5%',
    containLabel: true
  },

加与不加的区别
在这里插入图片描述
详细例子：https://blog.csdn.net/qq_38210427/article/details/141864992

四 toolbox工具栏

在这里插入图片描述

五 dataZoom 缩放工具

在这里插入图片描述

六 brush 选择区域

在这里插入图片描述

案例：

在这里插入图片描述

七坐标系

7.1 直角坐标系

在这里插入图片描述

案例：

在这里插入图片描述

7.2polar极坐标系

在这里插入图片描述

7.3parallel 平行坐标系

在这里插入图片描述

7.4 单轴坐标系singleAxis

在这里插入图片描述

7.5 timeline时间轴

在这里插入图片描述

<!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="ec" style="width:600px;height:400px"></div>
</body>
<script>
    var ech = document.getElementById("ec")
    var myCh = echarts.init(ech)
    var options = {
        baseOption: {
        timeline: {
            data:['2020','2021','2022','2023']
        },
    },
    options: [{
        title:{
        text:'2020销量'
    }},{
        title:{
            text:'2021销量'
        }

},{title:{
        text:'2022销量'
    }},{title:{
        text:'2023销量'
    }}]
    }
    myCh.setOption(options)
</script>
</html>

7.6geo地理坐标系

在这里插入图片描述

1 选择某个地方，将坐标文字下载到本地或者使用在线的

阿里云可视化地图json地址 http://datav.aliyun.com/portal/school/atlas/area_selector

在这里插入图片描述

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>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <div id="ec" style="width:600px;height:400px"></div>
</body>
<script>
    var ech = document.getElementById("ec")
    var myCh = echarts.init(ech)
    // https://geo.datav.aliyun.com/areas_v3/bound/320100_full.json
    $.getJSON("https://geo.datav.aliyun.com/areas_v3/bound/320100_full.json",function(r){
        // 注册地图组件
        echarts.registerMap("南京",r)
        var options = {
            geo:{
                map:"南京",
                label:{
                    show:true
                },
                itemStyle:{
                    areaColor:'#3a90fa'
                },
                regions: [{
                    name: '江宁区',
                    itemStyle: {
                        areaColor: 'red',
                        color: 'red'
                    }
                }]
            }
        }
        myCh.setOption(options)
    })
    
</script>
</html>