echarts基本用法

最新推荐文章于 2024-01-30 11:39:17 发布

哈市南湖

最新推荐文章于 2024-01-30 11:39:17 发布

阅读量440

点赞数

文章标签： echarts Powered by 金山文档

本文链接：https://blog.csdn.net/qq_48163513/article/details/129092736

版权

本文介绍了ECharts的配置项，如series用于定义图表类型和数据，xAxis和yAxis设置直角坐标轴，grid定义内绘图网格，tooltip和legend分别处理提示框和图例。此外，文章还讨论了颜色列表、数据堆叠以及setOption方法用于动态更新图表。

摘要由CSDN通过智能技术生成

<!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>
    
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'line',
                smooth: true,
                data: [5, 20, 36, 10, 10, 20],
                areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(128, 255, 165)'
          },
          {
            offset: 1,
            color: 'rgb(1, 191, 236)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      showSymbol: false,
      stack: 'Total',
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

主要配置：series xAxis yAxis grid tooltip title legend color：

series
– 系列列表。每个系列通过 type 决定自己的图表类型
– 通俗的理解：图标数据，指定什么类型的图标，可以多个图表重叠。

xAxis：直角坐标系 grid 中的 x 轴

– boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。

yAxis：直角坐标系 grid 中的 y 轴

grid：直角坐标系内绘图网格。

title：标题组件

tooltip：提示框组件

legend：图例组件

color：调色盘颜色列表

stack：数据堆叠，同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。

emphasis：阴影

ECharts常用配置：

setOption()绘制图表

所有参数和数据的修改都可以通过 setOption 完成

调用方式：myChart.setOption(option); （option：必填参数，对象类型，包含图表的配置项和数据）

setOption()常用配置项：

// title 标题组件
let myChart = echarts.init(document.getElementById("main"));
myChart.setOption({
    xAxis: {
      data: ["足球", "篮球", "乒乓球", "跳绳", "健步走", "呼啦圈", "踢毽", "霹雳舞"],
    },
    yAxis: {},
    series: [
      {
        name: "参与人数",
        type: "bar",
        data: [100, 90, 80, 70, 10, 50, 40, 30, 20, 50],
      },
    ],
});

xAxis 直角坐标系 grid 中的 x 轴：

//配置直角坐标系 grid 中的 x 轴
xAxis: {
  show: true, // 是否显示 x 轴,默认true
  type: "category", //坐标轴类型。默认category(类目轴)，其他值：value(数值轴),time(时间轴),log(对数轴)
  name: "x轴名字", //坐标轴名称。
  nameLocation: "center", //坐标轴名称显示位置。
  nameTextStyle: {}, //坐标轴名称的文字样式
  inverse: true, //是否是反向坐标轴。默认false    
  axisLabel:{//坐标轴刻度标签的相关设置。
    show: true, //是否显示刻度标签。
    color: "red", //刻度标签文字的颜色，默认取 axisLine.lineStyle.color。支持回调函数
  },
  data: [
    "足球",
    "篮球",
    "乒乓球",
    "跳绳",
    "健步走",
    "呼啦圈",
    "踢毽",
    {
      value: "霹雳舞",
      textStyle: { fontSize: 20, color: "red"},//类目标签的文字样式
    },
  ],
  //Array,类目数据，在类目轴（type: 'category'）中有效。
  //如果没有设置 type，但是设置了 axis.data，则认为 type 是 'category'。
  //如果设置了 type 是 'category'，但没有设置 axis.data，则 axis.data 的内容会自动从 series.data 中获取
},

yAxis 直角坐标系 grid 中的 y 轴：

// y轴属性与x轴属性相似，需特别注意的是，type属性默认值不同
yAxis: {
  type: "value", //坐标轴类型。默认值value，x轴type默认值为category
},

注：不管在x轴还是y轴，如果没有设置 type，但是设置了 axis.data，则认为 type 是 ‘category’。如果设置了 type 是 ‘category’，但没有设置 axis.data，则 axis.data 的内容会自动从 series.data 中获取

legend

图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。示例见下方第一个例子，图中箭头指向处就是图例组件。

legend: {
    data: this.allLegend,
    textStyle: {
      //图例字体大小
      fontSize: 10,
    },
    //图例大小
    itemHeight: 10,
    //图例滚动显示
    type: 'scroll',
    //图例纵向显示
    orient: 'vertical',
    //图例位置
    right: 0,
    top: 30,
    bottom: 30,
},

series 样式数据等

series属性值是数组，数组中可包含一个或多个对象，一个对象对应一个系列的图标，配置对象中的属性可以更改系列图表类型，样式等。