❤echarts折线图完整使用及详细配置参数

❤echarts折线图引入使用及详细配置

vue3使用方法的文章进行了重新梳理:地址https://juejin.cn/spost/7400672360452816896

vue2部分写法如下:

id="echartline"

方法

this.xselinechartin('echartline');

xselinechartin(id) {
      // 折线图 3
      // console.log(document.getElementById(id));
      if (document.getElementById(id)) {

        let zhexian3 = echarts.init(document.getElementById(id));
        let optionzhexian = {
          
           grid: {
            left: '20%', //距离左侧边距
            right: '0%',
            top: '10%',
            bottom:'25%',
            containLabel: false
          },
          
          dataZoom: [{
              type: 'inside', //1平移 缩放
              throttle: '50', //设置触发视图刷新的频率。单位为毫秒(ms)。
              minValueSpan: 5, //用于限制窗口大小的最小值,在类目轴上可以设置为 5 表示 5 个类目
              start: 1, //数据窗口范围的起始百分比 范围是:0 ~ 100。表示 0% ~ 100%。
              end: 10, //数据窗口范围的结束百分比。范围是:0 ~ 100。
              zoomLock: true, //如果设置为 true 则锁定选择区域的大小,也就是说,只能平移,不能缩放。
            }],
          color:'#002f36',// #002f36  008297
          tooltip: {
            trigger: 'item', // 触发类型,可选值: 'item'(数据项触发),'axis'(坐标轴触发),'none'(不触发)
            axisPointer: {
                type: 'line', // 设置触发提示的指示器类型 
                // 可选值: 'line'(直线指示器),'shadow'(阴影指示器),'cross'(十字准星指示器)
            },
            backgroundColor: 'rgba(0,47,54,1)', // 设置背景颜色
            textStyle: {
                color: '#fff', // 设置文本颜色
                fontSize:12, // 设置文字大小

            },
            padding: [5, 10], // 内边距
            formatter: `2023{b}<br/>US$ {c}`, 
           },

          
          xAxis: {
            type: 'category',
            data: ['11月26日', '11月27日', '11月28日', '11月29日', '11月30日', '12月1日', '12月2日']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [0,0,0,0,20,0],
            type: 'line',
            smooth: false,//
          }]
        };

        zhexian3.setOption(optionzhexian);
      }

    },

(3)实现

基础版本的折线图以及预览
在这里插入图片描述
代码:

option = {
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 250, 224, 218, 135, 147, 260],
      type: 'line',
    },
    {
      data:[15,51,150,18,25,29,59,56],
      type:'line',
    }
  ]
};

2、查看echarts结构参数

01 基础版本的折线图

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

二、效果源码

以下折线图直接复制到echarts官网可以直接使用:

【折线图效果1】

image.png

【折线图源码1】

option = {
  title: {
    text: 'Stacked Line'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};

【折线图效果2】

image.png

【折线图源码2】

option = {
        color: ['#1890FF', '#52E3A9'], //'#FFB566',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        splitLine: {
          color: '#85C2FC'
        },
        legend: {
          data: ['Evaporation', 'Precipitation', '22']
        },
        xAxis: [{
          boundaryGap: false, //过长隐藏x轴文字
          splitLine: {
            show: false,
            lineStyle: {
              color: ['rgba(133, 194, 252, 0.4)'],
              width: 1,
              type: 'solid'
            }
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              // color: 'rgba(133, 194, 252, 0.4)', //坐标线的颜色
              color:'#DBD8D9',
              width: '2' //坐标线的宽度
            }
          },
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: '#808080',
              fontSize: '10px'
            }
          },
          type: 'category',
          data: [
            '2022年6月2号',
            '2日',
            '3日',
            '4日',
            '5日',
            '6日',
            '7日',
            '8日',
            '9日',
            '10日',
            '11日'
          ],
          axisPointer: {
            type: 'shadow'
          }
        }],
        yAxis: [{
            type: 'value',
            name: '',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              //y轴文字的配置
              formatter: '{value}',
              show: true,
              textStyle: {
                
                color: '#808080',
                fontSize: '10px'
              }
              // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: 'rgba(133, 194, 252, 0.4)', //坐标线的颜色
                width: '2' //坐标线的宽度
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                // color: ['rgba(133, 194, 252, 0.4)'],
                color:'#DBD8D9',
                width: 1,
                type: 'solid'
              }
            },
          },
          {
            type: 'value',
            name: '',
            show: false,
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: 'Evaporation',
            type: 'line',
            smooth: true, //平滑
            showSymbol: false,
            lineStyle: {
              // 阴影部分
              width: 3, // 线条颜色、粗细
              color: '#FFB566',
              shadowOffsetX: 0, // 折线的X偏移
              shadowOffsetY: 4, // 折线的Y偏移
              shadowBlur: 8, // 折线模糊
              shadowColor: 'rgba(255, 181, 102, 0.4)' //折线颜色
            },
            color: '#FFB566',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function(value) {
                return value;
              }
            },
            data: [20.3, 23.4, 23.0, 16.5, 12.0, 6.2, 2.0, 2.2, 3.3, 4.5, 6.3, 10.2]
          },
          {
            name: 'Precipitation',
            type: 'line',
            smooth: true, //平滑
            lineStyle: {
              // 阴影部分
              width: 3, // 线条颜色、粗细
              color: '#1791FF',
              shadowOffsetX: 0, // 折线的X偏移
              shadowOffsetY: 4, // 折线的Y偏移
              shadowBlur: 8, // 折线模糊
              shadowColor: 'rgba(3,116,255,0.4)' //折线颜色
            },
            showSymbol: false,

            color: '#52E3A9',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function(value) {
                return value + ' °C';
              }
            },
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          },
          {
            name: '22',
            type: 'line',
            showSymbol: false,
            lineStyle: {
              // 阴影部分
              width: 3, // 线条颜色、粗细
              color: '#52E3A9',
              shadowOffsetX: 0, // 折线的X偏移
              shadowOffsetY: 4, // 折线的Y偏移
              shadowBlur: 8, // 折线模糊
              shadowColor: 'rgba(3,116,255,0.4);' //折线颜色
            },
            smooth: true,
            color: '#1890FF',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function(value) {
                return value + ' °C';
              }
            },
            data: [2, 6.3, 5.0, 6, 7, 8, 9, 12.0, 6.2, 10.2, 20.3, 23.4]
          }
        ]
      };

三、echarts折线图问题

4、实现效果

  • 效果1
    在这里插入图片描述

  • 效果2
    在这里插入图片描述

四、完整使用案例

效果源码1

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
 myChart.setOption(
 {
  tooltip: {
    trigger: ''
  },
  // legend: {
  //   data: ['Email', 'Union Ads']
  // },
  grid: { //距离各个地方的边距 1
    left: '10%',
    right: '5%',
    bottom: '10%',
    containLabel: true
  },
grid: {  //另外一种方式控制 2
        x: "12%",//x 偏移量
        y: "7%", // y 偏移量
        width: "87%", // 宽度
        height: "79%"// 高度
 },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',,
    // 隐藏y轴
        axisLine: {
          show: false
        },
   // 隐藏y轴刻度线
        axisTick: {
          show: false
        },
        // y轴网格线设置
        splitLine: {
          type: "dashed",
          color: "#eeeeee"
        },
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    }
  ]
 });

完整源码2

option = {
  tooltip: { trigger: 'axis' },
  dataZoom: [
    {
      type: 'inside', //1平移 缩放
      throttle: '50', //设置触发视图刷新的频率。单位为毫秒(ms)。
      minValueSpan: 12, //用于限制窗口大小的最小值,在类目轴上可以设置为 5 表示 5 个类目
      start: 0, //数据窗口范围的起始百分比 范围是:0 ~ 100。表示 0% ~ 100%。
      end: 50, //数据窗口范围的结束百分比。范围是:0 ~ 100。
      zoomLock: true //如果设置为 true 则锁定选择区域的大小,也就是说,只能平移,不能缩放。
    }
  ],

  grid: {
    x: '10%', //x 偏移量
    y: '7%', // y 偏移量
    width: '50%', // 宽度
    height: '55%', // 高度
    right: '20%'
  },

  xAxis: {
    type: 'category',

    data: [
      '1',
      '2',
      '3',
      '4',
      '5',
      '6',
      '7',
      '8',
      '9',
      '10',
      '11',
      '12',
      '1',
      '2',
      '3',
      '4',
      '5',
      '6',
      '7',
      '8',
      '9',
      '10'
    ],
    axisLabel: { interval: 1 }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [
        150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 150, 230,
        224, 218, 135, 147, 260, 150, 230, 224, 218, 135
      ],
      type: 'line'
    }
  ]
};

更多相关源码已经放进个人开源项目中:评论获取地址

### npm 安装 ECharts 后的提示信息解析 当通过 `npm install echarts` 成功安装 ECharts 库后,终端会显示一系列提示信息。以下是这些提示信息的具体含义: #### 1. **资金支持 (Funding Support)** 如果某个 NPM 包启用了资金支持功能,则会在成功安装后显示捐赠链接或资助方式。这是为了鼓励开发者支持开源项目的持续发展[^4]。例如,ECharts 可能会显示如下类似的提示信息: ``` > echarts@5.4.0 postinstall /node_modules/echarts > node -e "console.log('\n️ Thanks for installing echarts!')" ️ Thanks for installing echarts! If you find this library useful, please consider supporting the project: https://ecomfe.github.io/echarts/donate.html ``` 这表明可以通过访问上述 URL 支持该项目的资金运作。 --- #### 2. **新版本通知 (New Version Notification)** 有时,NPM 会在安装完成后提醒用户当前使用的 NPM 版本较旧,并建议升级至最新稳定版。这种提示通常类似于以下内容: ``` updated 1 package and audited 789 packages in 3.456s found 0 vulnerabilities You can access new features by upgrading to the latest version of npm. Run 'npm install -g npm@latest' to update your installation. ``` 这意味着用户的本地 NPM 工具并非最新版本,可能无法利用某些最新的优化特性或安全修复[^2]。因此,推荐执行命令 `npm install -g npm@latest` 来完成全局更新。 --- #### 3. **依赖关系确认** 在安装过程中,NPM 还会对项目中的 `package.json` 文件进行分析,判断是否需要将 ECharts 添加到 `dependencies` 或 `devDependencies` 中。具体取决于安装时所带参数: - 如果未附加任何标志(如 `-S/--save` 或 `-D/--save-dev`),则默认行为由 NPM 配置决定。 - 使用 `--save` 参数表示将其加入生产环境所需模块列表 (`dependencies`);而使用 `--save-dev` 则意味着仅用于开发阶段(`devDependencies`)[^4]。 对于大多数情况而言,由于 ECharts 是一种可视化图表库,在最终产品中会被直接调用渲染图形界面,所以一般应作为正式依赖项处理即存入 `dependencies` 下面去管理。 ```json { "dependencies": { "echarts": "^5.4.0" } } ``` --- #### 4. **调试日志文件生成条件** 尽管正常情况下不会有错误发生从而无需额外记录数据,但如果确实遇到了问题比如网络中断或者兼容性冲突等情况的话,就会自动生成名为 `npm-debug.log` 的诊断报告帮助排查原因所在[^1]。不过就单纯顺利完成操作来说是不会留下此类痕迹文档存在的。 --- ### 示例代码展示如何引入已安裝好的 ECharts 下面给出一段简单的 JavaScript 实现加载并初始化一个基本折线图的例子: ```javascript // 引入整个 ECharts 库 import * as echarts from 'echarts'; // 准备好 DOM 容器 const chartDom = document.getElementById('main'); const myChart = echarts.init(chartDom); // 设置初始选项配置对象 var option = { xAxis: {}, yAxis: {}, series: [{ data: [820, 932, 901, 934, 1290], type: 'line' }] }; myChart.setOption(option); ``` 以上就是关于 npm 安装 echarts 结果及其相关提示信息意义解答的内容总结。 ---
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

林太白

感谢打赏,你必大富大贵之人!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值