菜单 搜索
首页 前端知识 ECharts 的基本配置

ECharts 的基本配置

2024-11-04 10:11:36 前端知识 前端哥 612 940 我要收藏

一. 初体验

1. 基本配置

<body>
    <!-- 必须设置高度 -->
    <div id="main" style="width: 800px; height: 400px"></div>
    <!-- 
      window.echarts 对象
     -->
    <script src="../libs/echarts-5.3.3.js"></script>
    <script>
      // 1.拿到echarts的实例对象
      var myChart = echarts.init(document.getElementById("main"), null, {
        renderer: 'svg'
        // renderer: 'canvas'
      });
      // 2.编写图表配置项和数据
      var option = {
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      };
      // 3.将图表显示到界面上
      myChart.setOption(option);
    </script>
  </body>
复制

2. 切换渲染引擎 和 主题色

echarts.init(document.getElementById("main"), null, {renderer: "svg"});
 
echarts.init(document.getElementById("main"), "dark", {renderer: "canvas"});
复制

二. 配置项（组件）

1. grid 网格

var option = {
    backgroundColor: "pink",
    grid: {
        show: true,
        backgroundColor: "lightblue",
        left: 0,  // 相对于组外层容器的位置
        right: 0,
        // top: 0,
        // bottom: 0,
        containLabel: true, // 是否保留坐标轴坐标标签
    },
    xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    },
    yAxis: {},
    series: [
        {
        name: "销量",
        type: "bar",
        data: [5, 20, 36, 10, 10, 20],
        },
    ],
};
复制

2. x/y 坐标轴

xAxis: {
    show: true,
    name: "类目坐标",  // 轴坐标名称
 
    type: "category", // 类目坐标才有data选项 
    // type: "value", 
    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
 
    axisLine: { // 坐标轴轴线相关设置。
        show: true,
        lineStyle: {
        color: "red",
        width: 3,
        },
    },
 
    axisLabel: { // 坐标轴标签的相关设置。
        show: true,
        color: "green",
        fontSize: 16,
    },
    
    axisTick: {  // 坐标轴刻度相关设置。
        show: true,
        length: 10,
        lineStyle: {
        color: "blue",
        width: 3,
        },
    },
        
    splitLine: { // 坐标轴在 grid 区域中的分隔线。
        show: true,
        lineStyle: {
        color: "orange",
        width: 1,
        },
    }, 
}
复制

3. series 系列

1. data 支持的书写方式

series: [
    {
    name: "产品销量柱形图",
    type: "bar",
    label: {
        show: true,
    },
    
    // 方式一
    // 按照坐标轴索引进行匹配，顺序不可变  [value1, value2]
    data: [5, 20, 36, 10, 10, 20],  
        
        
    // 方式二
    // [index, value]
    data: [
      [0, 5],
      [1, 20],
      [2, 36],
      [3, 10],
      [4, 10],
      [5, 20],
    ],
                
        
    // 方式三(推荐)
    data: [
        {
            value: 5,
            name: "衬衫", // 数据项名称, 比如pie系列 tooltip 需要用到
        },
        {
            value: 20,
            name: "羊毛衫",
        },
        {
            value: 36,
            name: "雪纺衫",
        },
        {
            value: 10,
            name: "裤子",
        },
        {
            value: 10,
            name: "高跟鞋",
        },
        {
            value: 20,
            name: "袜子",
        },
    ],
                
        
    // 方式四
    data: [
      {
        value: [0, 5], // 数组第一项为x轴值，第二项为y轴值
        name: "衬衫", // 数据项名称, 比如pie系列 tooltip 需要用到
      },
      {
        value: [1, 20],
        name: "羊毛衫",
      },
      {
        value: [2, 36],
        name: "雪纺衫",
      },
      {
        value: [3, 10],
        name: "裤子",
      },
      {
        value: [4, 10],
        name: "高跟鞋",
      },
      {
        value: [5, 20],
        name: "袜子",
      },
    ],
        
            
    // 方式五(地理坐标系推荐)
    data: [
      {
        value: [0, 5, 500], // 第一项为x轴或纬度值，第二项为y或维度轴值，第三项以后为扩展值
        name: "衬衫", // 数据项名称, 比如pie系列 tooltip 需要用到
      },
      {
        value: [1, 20, 400],
        name: "羊毛衫",
      },
      {
        value: [2, 36, 200],
        name: "雪纺衫",
      },
      {
        value: [3, 10, 100],
        name: "裤子",
      },
      {
        value: [4, 10, 600],
        name: "高跟鞋",
      },
      {
        value: [5, 20, 300],
        name: "袜子",
      },
    ],
  },
],
复制

2. type 图表类型

series: [
    {
        name: "产品销量柱形图",
        type: "line", // line 折线图  bar 柱状图  scatter 散点图  pie 饼图
        data: [5, 20, 36, 10, 10, 20], 
    },
],
复制

 
// 饼图
series: [
    {
        name: "产品销量柱形图",
        type: "pie",
 
        // 饼图的中心点相对于容器的位置
        center: ["50%", "50%"],
        
        // 饼图的直径百分比是参照容器高和宽中较小一项  
        // [内圆的直径，外圆的直径]
        radius: ["10%", "50%"], 
 
        //area玫瑰图(南丁格尔图)。 圆心角一样，通过半径展现数据大小(默认false)
        // roseType: "area",
 
        data: [
            {
                value: 5,
                name: "衬衫", // 数据项名称, 比如pie系列 tooltip 需要用到
            },
            {
                value: 20,
                name: "羊毛衫",
            },
            {
                value: 36,
                name: "雪纺衫",
            },
            {
                value: 10,
                name: "裤子",
            },
            {
                value: 10,
                name: "高跟鞋",
            },
            {
                value: 20,
                name: "袜子",
            },
        ],
    },
],
复制

 

 3. label 图表的标签

series: [
    {   
        name: "产品销量柱形图",
        type: "bar",
        
        label: { // 系列图形上的文本标签
            show: true,
            position: [10, 20], // 标签所处于每项图表中的位置
            color: "white",
            fontSize: "20px",
        },
        data: [10, 20, 30, 20, 10, 20]
    },
]
复制

 4. itemStyle 图形默认色

series: [
    {   
        name: "产品销量柱形图",
        type: "bar",
        itemStyle: { // 系列图形的样式
            color: "red", // 图形颜色
            borderColor: "orange", // 边框颜色
            borderWidth: 4,  // 边框宽度
            opacity: 0.4,   // 图形颜色的透明度
        },
        data: [10, 20, 30, 20, 10, 20]
    },
]
复制

 5. emphasis 鼠标悬浮时的高亮色

series: [
    {   
        name: "产品销量柱形图",
        type: "bar",
        label: {
            show: true
        },
        itemStyle:{
            color: 'pink'
        },
 
        emphasis: { // 鼠标 hover 时的高亮色
            label: {
                show: true,
                color: "gold",
            },
            itemStyle:{
                color: 'red'
            },
            // ...
        },
 
        data: [10, 20, 30, 20, 10, 20]
    },
]
复制

4. title 标题组件

title: {
    text: "一级标题",
    left: 20,
    top: 10,
    subText: "二级标题"
    // ...
},
复制

5. legend 图例组件

legend: {
    show: true,
    // width: 50, // 图例组件的总宽度,默认自适应
    itemWidth: 20, // 每个图例标记的图形宽度。
    icon: "circle",
    //   top: 10,
    // bottom: 0,
 
    // 用来格式化图例标记文本，支持字符串模板和回调函数两种形式
    // formatter: "liu-{name}",  
    formatter: function (name) {
        // 富文本语法：{style_name|value} 不能有空格
        return name + "  {countSty|40%}";
    },
    textStyle: {
        color: "red",
        rich: { // 在 rich 里面，可以自定义富文本样式
            countSty: {
            color: "blue",
            },
        },
    },
},
复制

 

6. tooltip 提示组件

tooltip: {
    show: true,
    
    // 使用了 trigger ，一般也结合 axisPointer
    trigger: "axis",  // 默认是 item
    
    axisPointer: {
        type: "shadow", //  (默认是竖线 line)  (横线 + 竖线 cross)  (柱状 shadow)
    },
    formatter: "123"  // 自定义标签的显示内容
},
复制

7. 图形渐变色

color: {
  // 渐变
  type: "linear",
  // 坐标配置  [0,0]  =>  [0,1]
  x: 0,
  y: 0,
  x2: 0,
  y2: 1,
  // 
  colorStops: [
    {
      offset: 0.5,
      color: "red",
    },
    {
      offset: 1,
      color: "blue",
    },
  ],
},
复制

 三. 图表实例

1. 柱形图

var option = {
  backgroundColor: "rgba(40, 46, 72)",
  grid: {
    show: true,
    backgroundColor: "rgba(0, 255, 0, 0.1)",
    left: "5%",
    right: "10%",
    top: "30%",
    bottom: "5%",
    containLabel: true, // grid 区域是否包含坐标轴的刻度标签
  },
  tooltip: {},
  xAxis: {
    name: "月份",
    axisLine: {
      show: true,
      lineStyle: {
        color: "#42A4FF",
      },
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      color: "white",
    },
 
    data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
  },
  yAxis: {
    name: "个",
    nameTextStyle: {
      color: "white",
      fontSize: 13,
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "#42A4FF",
      },
    },
    axisTick: {
      show: false,
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: "#42A4FF",
      },
    },
    axisLabel: {
      color: "white",
    },
  },
  series: [
    {
      name: "销量",
      type: "bar",
      barWidth: 17,
      itemStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#01B1FF", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#033BFF", // 100% 处的颜色
            },
          ],
        },
      },
      data: [500, 2000, 3600, 1000, 1000, 2000, 4000],
    },
  ],
};
复制

转载请注明出处或者链接地址：https://www.qianduange.cn//article/19908.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

用html写一个漂亮的登录页

2025-01-16 20:01:33

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！