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

百度echarts曲线类型

作者头像
周星星9527
发布于 2021-12-16 07:13:26
发布于 2021-12-16 07:13:26
52100
代码可运行
举报
运行总次数: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 数据可视化详解》
注:本系列教程需要对应 JavaScript 、html、css 基础,否则将会导致阅读时困难,本教程将会从 ECharts 的官方示例出发,详解每一个示例实现,从中学习 ECharts 。
1_bit
2022/12/09
4.9K0
一、基础折线图详解《手把手教你 ECharts 数据可视化详解》
echarts数据可视化
Charts,商业级数据图表,是百度的一个开源的数据可视化工具。目前,非常美观,非常好用,非常受欢迎的数据可视化工具。
ruochen
2021/12/04
1.7K0
wordpress统计某段时间用户发帖量-文曦博客
  统计用户某段时间的发帖量,展示图片如图:         可以排除某些用户ID         可以调整选择页的选项个数,我的是12个月         当然,你也可以自己
雾海梦曦
2022/11/14
5010
wordpress统计某段时间用户发帖量-文曦博客
ECharts实现mysql 数据图表化
采用Ajax,通过php,从mysql取出数据,然后将数据使用ECharts展示。如果想要动态刷新图标,那么设置一个定时器,定时取数,就可以达到目的。
逍遥子大表哥
2021/12/18
3K0
ECharts实现mysql 数据图表化
echarts中地图和统计图的简单使用
各个省份地图json下载地址: https://github.com/apache/incubator-echarts/tree/master/map 或者点击这里 链接:https://pan.baidu.com/s/11d-vKVEip7InOOlu8si8RA 提取码:b397
不愿意做鱼的小鲸鱼
2022/09/26
1.4K0
echarts中地图和统计图的简单使用
三、教你搞懂渐变堆叠面积图《手把手教你 ECharts 数据可视化详解》
注:本系列教程需要对应 JavaScript 、html、css 基础,否则将会导致阅读时困难,本教程将会从 ECharts 的官方示例出发,详解每一个示例实现,从中学习 ECharts 。
1_bit
2022/12/14
1.8K0
三、教你搞懂渐变堆叠面积图《手把手教你 ECharts 数据可视化详解》
echarts中国主要城市空气质量
行之苟有恒,久久自芬芳。——崔瑗 中国主要城市空气质量: 代码出处:https://echarts.apache.org/examples/zh/editor.html?c=effectScatt
阿超
2022/08/17
8320
echarts中国主要城市空气质量
echarts关系图
交一个读破万卷书邪士,不如交一个不识一字端人——金缨 案例地址:https://echarts.apache.org/examples/zh/editor.html?c=graph&version
阿超
2022/09/29
2K1
echarts关系图
关于flask入门教程-ajax+echarts实现数量未知的折线图
前文学习了ajax、jsonify、数据库返回结果、echarts柱状图等用法,关于折线图原来想象着没有多困难的事情,结果碰了一大堆钉子,终于得到圆满解决,第一个要解决的是数量未知的折线图如何构造,没办法只能动态构造,第二个要解决的事情是如何构造json文件,第三个要解决的事情是如何生成数据,第四个要解决的事情js如何解析json数据。
python与大数据分析
2022/03/11
8370
关于flask入门教程-ajax+echarts实现数量未知的折线图
[机器学习]线性回归-基于tensorflow.js
《传热学》横掠管外对流换热系数测定实验中,奴赛尔数Nu与雷诺数Re的关系式,通过实验测定,并确定公式中的系数C和指数n。这里使用机器学习进行线性回归。
周星星9527
2021/07/20
8910
Hexo -23- 使用 ECharts 插件绘制炫酷图表
excerpt: ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求,本文介绍如何在 Hexo 博客中使用 ECharts 插件。
为为为什么
2022/08/04
3.8K0
Hexo -23- 使用 ECharts 插件绘制炫酷图表
React Echarts 使用教程 - 如何在 React 中加入图表(内附数据看板实战搭建案例)
本文完整版:《React Echarts 使用教程 - 如何在 React 中加入图表(内附数据看板实战搭建案例)》
蒋川@卡拉云
2022/05/27
6.6K0
React Echarts 使用教程 - 如何在 React 中加入图表(内附数据看板实战搭建案例)
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
5690
echarts入门
echarts数据可视化如何实现_数据可视化页面
ECharts是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
全栈程序员站长
2022/11/04
2.5K0
echarts数据可视化如何实现_数据可视化页面
Echarts实现3D环状图效果(非3d)
如题 想要实现的效果: 代码如下 <!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" /> <script type="tex
且陶陶
2023/04/12
1.5K0
Echarts实现3D环状图效果(非3d)
echarts在markdown下深色模式自适应
我首先找了一个官方示例做例子。 圆角环形饼图:https://echarts.apache.org/examples/zh/editor.html?c=pie-borderRadius&lang=js
jcjyxjs
2021/09/26
2.7K0
【Vue】day03-VueCli(脚手架)
思考:什么时候可以发送初始化渲染请求?(越早越好)什么时候可以开始操作dom?(至少dom得渲染出来)
陶然同学
2023/10/14
2670
【Vue】day03-VueCli(脚手架)
图表数字化的制作神器
最近做的工作中,涉及到制图需求,看了同事用echarts制作的图,基本能满足需求,而且用起来,比较简单,值得研究。
bisal
2023/03/09
1.2K0
图表数字化的制作神器
Vue基础
注意:使用v-text时,会将标签内部的内容覆盖并且替换成对应的内容,若不希望内容被覆盖,则不可使用v-text的写法,两种写法都支持表达式,如:v-text="message + ‘!’",{{ message + “!” }}。
Cikian.
2022/09/22
2.8K0
Vue基础
基于tensorflow.js的机器学习
机器学习是什么?我认为其实就是统计学的另一种花里胡哨/故弄玄虚的说法!tensorflow.js是一个机器学习的框架:
周星星9527
2019/08/14
7340
基于tensorflow.js的机器学习
相关推荐
一、基础折线图详解《手把手教你 ECharts 数据可视化详解》
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档