首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >百度echarts曲线类型

百度echarts曲线类型

作者头像
周星星9527
发布于 2021-12-16 07:13:26
发布于 2021-12-16 07:13:26
54000
代码可运行
举报
运行总次数:0
代码可运行

先看效果:

配置:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['default','Step End', 'Step Middle', 'Step Start','Smooth']
  },
  series: [
    {
      name: 'default',
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    },
    {
      name: 'Step End',
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      step: 'end',
    },
    {
      name: 'Step Middle',
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      step: 'middle',
    },
    {
      name: 'Step Start',
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      step: 'start',
    },
    {
      name: 'Smooth',
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      smooth: true
    }
  ]
};

完整代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=line-simple
-->
<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0">
        <div id="container" style="height: 100%"></div>

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
        <!-- Uncomment this line if you want to dataTool extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/extension/dataTool.min.js"></script>
        -->
        <!-- Uncomment this line if you want to use gl extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
        -->
        <!-- Uncomment this line if you want to echarts-stat extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
        -->
        <!-- Uncomment this line if you want to use map
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/map/js/china.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/map/js/world.js"></script>
        -->
        <!-- Uncomment these two lines if you want to use bmap extension
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@{{version}}/dist/extension/bmap.min.js"></script>
        -->

        <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};

var option;



option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['default','Step End', 'Step Middle', 'Step Start','Smooth']
  },
  series: [
    {
      name: 'default',
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    },
    {
      name: 'Step End',
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      step: 'end',
    },
    {
      name: 'Step Middle',
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      step: 'middle',
    },
    {
      name: 'Step Start',
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      step: 'start',
    },
    {
      name: 'Smooth',
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      smooth: true
    }
  ]
};

if (option && typeof option === 'object') {
    myChart.setOption(option);
}
</script>
    </body>
</html>
    
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-12-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 传输过程数值模拟学习笔记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
ECharts 多种图表类型展示
小焱写作
2025/09/03
1990
echarts 使用教程
ECharts 是百度开发的一款强大的开源数据可视化库,支持多种图表类型,使用 JavaScript 编写,非常适合在网页中展示各类数据图表。下面是一个基础的 ECharts 使用教程:
小焱
2025/08/31
2170
echarts图表 category 的底部xAxis展示文字太长,改为斜着展示
在 ECharts 中,当 xAxis 为类目轴(category)且底部展示的文字太长时,将文字斜着展示,可以通过配置 axisLabel 的 rotate 属性来实现。以下是不同图表类型(以柱状图和折线图为例)的具体配置方法:
小焱写作
2025/09/03
1660
一、基础折线图详解《手把手教你 ECharts 数据可视化详解》
注:本系列教程需要对应 JavaScript 、html、css 基础,否则将会导致阅读时困难,本教程将会从 ECharts 的官方示例出发,详解每一个示例实现,从中学习 ECharts 。
1_bit
2022/12/09
5.5K0
一、基础折线图详解《手把手教你 ECharts 数据可视化详解》
echarts中地图和统计图的简单使用
各个省份地图json下载地址: https://github.com/apache/incubator-echarts/tree/master/map 或者点击这里 链接:https://pan.baidu.com/s/11d-vKVEip7InOOlu8si8RA 提取码:b397
不愿意做鱼的小鲸鱼
2022/09/26
1.5K0
echarts中地图和统计图的简单使用
echarts关系图
交一个读破万卷书邪士,不如交一个不识一字端人——金缨 案例地址:https://echarts.apache.org/examples/zh/editor.html?c=graph&version
阿超
2022/09/29
2.1K1
echarts关系图
[机器学习]线性回归-基于tensorflow.js
《传热学》横掠管外对流换热系数测定实验中,奴赛尔数Nu与雷诺数Re的关系式,通过实验测定,并确定公式中的系数C和指数n。这里使用机器学习进行线性回归。
周星星9527
2021/07/20
9340
wordpress统计某段时间用户发帖量-文曦博客
  统计用户某段时间的发帖量,展示图片如图:         可以排除某些用户ID         可以调整选择页的选项个数,我的是12个月         当然,你也可以自己
雾海梦曦
2022/11/14
5450
wordpress统计某段时间用户发帖量-文曦博客
ECharts实现mysql 数据图表化
采用Ajax,通过php,从mysql取出数据,然后将数据使用ECharts展示。如果想要动态刷新图标,那么设置一个定时器,定时取数,就可以达到目的。
逍遥子大表哥
2021/12/18
3K0
ECharts实现mysql 数据图表化
echarts中国主要城市空气质量
行之苟有恒,久久自芬芳。——崔瑗 中国主要城市空气质量: 代码出处:https://echarts.apache.org/examples/zh/editor.html?c=effectScatt
阿超
2022/08/17
8620
echarts中国主要城市空气质量
echarts入门
社会犹如一条船,每个人都要有掌舵的准备——易卜生 根据官方文档入门echarts: 首先我们先引入cdn <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script> 然后为 ECharts 准备一个具备大小(宽高)的 DOM <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM --> <div id="main" style="width: 600px;height:400
阿超
2022/08/17
5960
echarts入门
Flask和echarts做可视化图表
现在是数据的时代,但是一堆数据是不直观的。我们需要可观测性,用图表展现出来,各种大屏可视化,看起来高大上的样子。截图的话,不够灵活,如果在PPT里能用动图展示,会让你的PPT增色不少。 可视化的工具很多,现在python各种库都能可视化,比如matplotlib,pycharts.
赵云龙龙
2022/04/26
8600
Flask和echarts做可视化图表
echarts图表 category 的底部xAxis展示文字太长,改为斜着展示
在 ECharts 中,当 xAxis 为类目轴(category)且底部展示的文字太长时,将文字斜着展示,可以通过配置 axisLabel 的 rotate 属性来实现。以下是不同图表类型(以柱状图和折线图为例)的具体配置方法:
小焱
2025/07/30
2290
基于tensorflow.js的机器学习
机器学习是什么?我认为其实就是统计学的另一种花里胡哨/故弄玄虚的说法!tensorflow.js是一个机器学习的框架:
周星星9527
2019/08/14
7630
基于tensorflow.js的机器学习
百度开源e-chart初探
  近年来,在数据服务的公司中,数据可视化越来越重要。随着而来的,国内外正在如火如荼的开发各种在线js视图展示框架。而百度的e-chart算是实用性较高且体验最好的!今天闲来无事,便来玩玩~
云海谷天
2022/08/09
1.4K0
百度开源e-chart初探
关于flask入门教程-ajax+echarts实现数量未知的折线图
前文学习了ajax、jsonify、数据库返回结果、echarts柱状图等用法,关于折线图原来想象着没有多困难的事情,结果碰了一大堆钉子,终于得到圆满解决,第一个要解决的是数量未知的折线图如何构造,没办法只能动态构造,第二个要解决的事情是如何构造json文件,第三个要解决的事情是如何生成数据,第四个要解决的事情js如何解析json数据。
python与大数据分析
2022/03/11
8680
关于flask入门教程-ajax+echarts实现数量未知的折线图
echarts数据可视化如何实现_数据可视化页面
ECharts是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
全栈程序员站长
2022/11/04
2.6K0
echarts数据可视化如何实现_数据可视化页面
三、教你搞懂渐变堆叠面积图《手把手教你 ECharts 数据可视化详解》
注:本系列教程需要对应 JavaScript 、html、css 基础,否则将会导致阅读时困难,本教程将会从 ECharts 的官方示例出发,详解每一个示例实现,从中学习 ECharts 。
1_bit
2022/12/14
1.9K0
三、教你搞懂渐变堆叠面积图《手把手教你 ECharts 数据可视化详解》
Vue基础
注意:使用v-text时,会将标签内部的内容覆盖并且替换成对应的内容,若不希望内容被覆盖,则不可使用v-text的写法,两种写法都支持表达式,如:v-text="message + ‘!’",{{ message + “!” }}。
Cikian.
2022/09/22
2.8K0
Vue基础
前端(五)-Vue简单基础
你可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇, 但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。   注意:v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值!
化羽羽
2022/10/28
1.1K0
相关推荐
ECharts 多种图表类型展示
更多 >
领券
一站式MCP教程库,解锁AI应用新玩法
涵盖代码开发、场景应用、自动测试全流程,助你从零构建专属AI助手
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档