Echarts图表之折线图

最新推荐文章于 2024-06-06 11:39:14 发布
最新推荐文章于 2024-06-06 11:39:14 发布
阅读量263 收藏
点赞数
文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gly_technology/article/details/122554596
版权

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Echarts图表</title>
        <!-- 引入echarts.min.js -->
        <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    </head>
    <body>
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            var myChart = echarts.init(document.getElementById('main'));
            var option = {
                color: '#02acb4',
                backgroundColor: 'rgba(1,202,217,.6)',
                grid: {
                    left: 60,
                    right: 60,
                    top: 50,
                    bottom: 40
                },
                //工具栏组件
                toolbox: {
                    //辅助线开关
                    feature: {
                        show: true,
                        //保存为图片
                        saveAsImage: {
                            show: true
                        }
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    //去掉坐标轴刻线
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.5)'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)'
                        }
                    },
                    axisLabel: {
                        color: 'rgba(255,255,255,.5)'
                    },
                    data: ['1', '3', '5', '7', '9', '11', '13', '15', '17', '19', '21', '23']
                },
                yAxis: {
                    type: 'value',
                    name: '',
                    min: 0,
                    max: 300,
                    //设置刻度间隔
                    interval: 50,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.5)'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)'
                        }
                    },
                    axisLabel: {
                        color: 'rgba(255,255,255,.5)'
                    }
                },
                series: [{
                    name: 'xxx分析',
                    type: 'line',
                    data: [110, 100, 200, 210, 240, 270, 120, 90, 180, 200, 240, 270]
                }]
            };
            myChart.setOption(option);
        </script>
    </body>
</html>

gly_technology
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Echarts 折线图
一片涟漪
08-31 204
<template> <div id="main" style="width: 100%;height: 220px"></div> </template> <script> import * as echarts from 'echarts'; export default { name: "securit", data() { return { lineData:[820, 932,
Echart-折线图
tong_baby的博客
07-12 588
最近做项目用到的echart的一些东西，整理出来供大家参考，写的不是很好，请大家多多提建议，只是列出了一些可能会用到但是不好查的东西 2.折线图var option= { color: 'red',//改变折线和转折点的颜色 tooltip: { show:false, //当前折线图上的某个点高亮显示出来，鼠标移到这个点上的时候高亮不丢失
Excel中的EcStat
06-28
Excel中的EcStat。。。小工具。。。做统计分析。。。
Echarts图表之线性图、柱形图
gly_technology的博客
01-18 1116
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Echarts图表</title> <!-- 引入echarts.min.js --> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.mi...
Echarts基础学习 4-折线图实战（工作任务）
最新发布
qkdgz的博客
06-06 699
Echarts学习，折线图，实战
区域等值面、热力图
qq_38948398的博客
06-30 2800
热力图绘制方案echarts + canvas高德地图kriging + canvas代码分享 讲讲项目背景，大屏专题图要绘制一个地区区域环境扩散效果，初步一开始感觉是一个热力图，后面经过描述确认不是，而是一个根据点位进行区域绘制的等值面 我以为的: 最后实际上的 第一张图是ui效果图，第二张图是确定功能需求后绘制的，说实话，看到ui效果图时我第一反应是热力图，因为这个扩散效果太像了，当时自己想的是这个图有河道，那就说明是地图，是地图那就说明可能需要缩放和拖拽，一开始项目中因为是大屏数据可视化，已经
Echarts 饼状图 Grid 设置详解
学IT，找陈寒
11-20 5404
在 Echarts 中，Grid 是坐标系的一部分，用于控制和调整图表的位置和大小。对于饼状图而言，虽然它是基于极坐标系创建的，但我们依然可以通过 Grid 的设置来影响图表的呈现方式。通过本文的介绍，我们详细了解了在 Echarts 中如何通过 Grid 配置来优化饼状图的显示效果。通过调整边距、半径、圆心等参数，我们可以使饼状图更好地适应不同的布局需求。同时，我们也展示了如何在包含多个环形图的情况下灵活运用 Grid 的配置。希望这些内容能够帮助你更好地使用 Echarts 创建出美观、清晰的饼状图。
根据经纬度在layui弹出层中显示百度地图
奔跑的菜鸡
12-22 1205
先上效果图 实现js代码 首选要引入layui，这个大家可以到layui官网看看怎么引入layer 附上layui官网url https://www.layui.com/doc/ 注意：这里要提示一点content中内容里的div一定要给一个宽高，不然地图是加载不出来的 return layer.open({ type: 1, title: false, closeBtn: false, area: '500px',
echarts 图表 折线图
07-21
echarts 图表 折线图
echarts图表柱状图折线图动态轮播tooltip窗
08-12
引入该包，在 myChart.setOption(option)注册表后，调用该方法 tools.loopShowTooltip(myChart, option, { loopSeries: true }) 注：myChart为echarts实例，option为该表配置。配置中必须要有tooltip的配置才可生效
echarts多条折线图动态分层的实现方法
10-16
在数据分析和可视化领域，ECharts 是一款非常流行的 JavaScript 图表库，它提供了丰富的图表类型，如折线图、柱状图、饼图等，并且支持高度定制化。本篇文章主要探讨的是如何在 ECharts 中实现多条折线图的动态分层...
echarts温度折线统计图
11-08
ECharts是一款由百度开源的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图等，能够方便地在网页上展示复杂的数据。在本案例中，我们将重点讨论如何使用ECharts创建一个...
echarts 双折线图 实现 与虚线
05-15
根据提供的信息，我们可以深入探讨如何在 ECharts 中实现双折线图，并且让其中一条折线显示为虚线。此示例代码虽然未完全展示，但已经足够让我们理解其核心概念和技术要点。 ### 一、ECharts 双折线图简介 #### ...
ECHART基本使用，折线图，柱状图，散点图，饼图，盒形图5分钟上手
知其白，守其黑；和其光，同其尘。
11-24 2万+
Echarts 是由百度团队打造的纯 JavaScript 的图表库，官网下载路径如下：http://echarts.baidu.com/download.htmlEcharts的特性：丰富的图表类型： 常用的有折线图，柱状图，散点图，饼图，盒形图，用于地理数据可视化的地图，热力图，线图等多个坐标系的支持 直角坐标系（catesian，同 grid）、极坐标系（polar）、地理坐标系（geo） 使
Echarts line折线图使用(vue)
dianpiyue3875的博客
04-26 1591
实现 首先引入echarts工具 // vue文件中引入echarts工具 let echarts = require('echarts/lib/echarts') require('echarts/lib/chart/line') // 以下的组件按需引入 require('echarts/lib/component/tooltip') // tooltip...
Echarts数据可视化series-line线图，开发全解+完美注释
热门推荐
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
08-07 2万+
mytextStyle={ color:"#333",//文字颜色 fontStyle:"normal",//italic斜体 oblique倾斜 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... fontFamily:"sans-serif", //字体系列
Echarts笔记——渐变色（1）线性渐变
XIATWO
03-31 1466
Echarts笔记——渐变色（1）线性渐变 线性渐变 （ linear ） color 的 x,y,x1,y1 分别表示四个方向。 offset 的范围 0~1 ，用于表示位置。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt..
Echarts饼状图设置
qq_45279180的博客
06-21 3292
最近公司在做一个PC端的项目，其中有一个统计的页面，说是统计其实就是几个图表放上去好看的，因为数据需要甲方传过来太麻烦，甲方也不会弄这玩意，所以我随便在官网找了几个demo放上去了。但是其中的一个饼状图，因为容器大小的原因导致它的饼状图和标题重合了，这肯定不行的，但是我发现使用grid设置无效，所以我查了一下，发现饼状图不能设置grid，而是center option1: { legend: {}, tooltip: { trigger:.
echarts设置x轴的文字换行
hello world
10-14 3333
有时候文字长度过长，会导致某些值消失，所以设置换行能够解决 xAxis : [ { type : 'category', data : [], axisLabel: { show: true, textStyle: { color: '#000000', fontSize:'16' } }, axisLabel...
echarts图表折线图添加阴影
08-30
要在ECharts图表的折线图中添加阴影效果，你可以使用axisPointer属性中的type属性，并将其设置为'shadow'。这将在鼠标悬停在图表上方时，在折线和x轴之间创建一个阴影效果。在formatter属性中，你可以使用自定义的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值