echarts折线图设置属性

最新推荐文章于 2024-08-01 12:00:00 发布

one橙子

最新推荐文章于 2024-08-01 12:00:00 发布

阅读量780

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/oneorang/article/details/119479667

版权

本文详细介绍了如何使用Echarts库创建和定制折线图，包括设置数据、坐标轴、图例、线条样式等多个关键属性，帮助读者实现个性化图表展示。

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

  var option = {

    backgroundColor: '#FFF0F5',

    title: {
      text: '折线图',
      subtext: '模拟数据',
      x: 'center'
    },

    legend: {
      // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
      orient: 'horizontal',
      // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
      x: 'left',
      // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
      y: 'top',
      data: ['预期','实际','假设']
    },

    //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
    grid: {
        top: '16%',   // 等价于 y: '16%'
        left: '3%', 
        right: '8%',
        bottom: '3%',
        co