echarts版本折线图
2024-05-17 04:00:15
1.效果如下：
绘制折线图，应该算是说echarts中使用最简单也算使用频率最高的一种功能了吧。根据官网列子能找出规律，只是有些属性对于初接触者来说，会有点陌生，不过仔细阅读一下还是不难找出窍门滴~~~
完整代码(仅供参考)：
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="utf-8">
6 <title>折线图</title>
7
8 <script src="/static/js/jquery.min.js"></script>
9 <!-- 引入 echarts.js -->
10 <script src="/static/js/echarts/echarts.js"></script>
11 </head>
12
13 <body>
14 <!-- 点击框 -->
15 <div onclick="clickme()" id="maindiv" style="border:1px solid #666;background-color: #ff55ff;width:100px;height:100px;">
16 <p>click me !!!</p>
17 </div>
18 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
19 <div id="main" style="width: 100%;height:1000px;"></div>
20 <script type="text/javascript">
21 // 基于准备好的dom，初始化echarts实例
22 var myChart = echarts.init(document.getElementById('main'));
23 function clickme(){
24 //隐藏掉点击框
25 $('#maindiv').css('display','none');
26 // 指定图表的配置项和数据
27 var option = {
28 backgroundColor: '#394056',
29 title: {
30 text: '手机销量折线图',
31 left: 'center', //grid 组件离容器左侧的距离
32 textStyle: {
33 fontWeight: '400',
34 fontSize: 25,
35 color: '#fff'
36 },
37 },
38 tooltip: {
39 trigger: 'axis',
40 axisPointer: {
41 lineStyle: {
42 color: '#57617B'
43 }
44 }
45 },
46 legend: {
47 icon: 'rect',
48 itemWidth: 14,
49 itemHeight: 5,
50 itemGap: 13,
51 //legend中的data的值需要跟series中的name保持一致，否则不会出现右上角的提示
52 data: ['华为手机销量','一加手机销量'],
53 right: '4%',
54 textStyle: {
55 fontSize: 12,
56 color: '#F1F1F3'
57 }
58 },
59 grid: {
60 left: '3%',
61 right: '4%',
62 bottom: '3%',
63 containLabel: true
64 },
65 xAxis: [{
66 type: 'category',
67 boundaryGap: false,
68 axisLine: {
69 lineStyle: {
70 color: '#57617B'
71 }
72 },
73 data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
74 }],
75 yAxis: [{
76 type: 'value',
77 axisTick: {
78 show: false
79 },
80 axisLine: {
81 lineStyle: {
82 color: '#57617B'
83 }
84 },
85 axisLabel: {
86 margin: 10,
87 textStyle: {
88 fontSize: 14
89 }
90 },
91 splitLine: {
92 lineStyle: {
93 color: '#57617B'
94 }
95 }
96 }],
97 series: [{
98 name: '华为手机销量',
99 type: 'line',
100 smooth: true,
101 lineStyle: {
102 normal: {
103 width: 1
104 }
105 },
106 areaStyle: {
107 normal: {
108 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
109 offset: 0,
110 color: 'rgba(219, 50, 51, 0.3)'
111 }, {
112 offset: 0.8,
113 color: 'rgba(219, 50, 51, 0)'
114 }], false),
115 shadowColor: 'rgba(0, 0, 0, 0.1)',
116 shadowBlur: 10
117 }
118 },
119 itemStyle: {
120 normal: {
121 color: 'rgb(219,50,51)'
122 }
123 },
124 data: [100,200,300,400,500,230,456,485,455,789,878,122]
125 }, {
126 name: '一加手机销量',
127 type: 'line',
128 smooth: true,
129 lineStyle: {
130 normal: {
131 width: 1
132 }
133 },
134 areaStyle: {
135 normal: {
136 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
137 offset: 0,
138 color: 'rgba(0, 136, 212, 0.3)'
139 }, {
140 offset: 0.8,
141 color: 'rgba(0, 136, 212, 0)'
142 }], false),
143 shadowColor: 'rgba(0, 0, 0, 0.1)',
144 shadowBlur: 10
145 }
146 },
147 itemStyle: {
148 normal: {
149 color: 'rgb(0,136,212)'
150 }
151 },
152 data: [456,789,155,455,664,744,122,366,856,666,111,323]
153 }, ]
154 };
155 // 使用刚指定的配置项和数据显示图表。
156 myChart.setOption(option);
157 }
158 </script>
159 </body>
160
161 </html>View Code
耐心、耐心……
echarts版本折线图相关推荐
- php echarts 两条曲线图,使用laravel和ECharts实现折线图效果的例子
1.首先引入echart.js 2.html页面,要有一个布局容器,用来显示图像,一定要设置宽和高 3.echarts折线图的使用 var myChart = echarts.init(documen ...
- echarts中折线图、柱状图之间的转换
echarts中折线图.柱形图.数据视图的转换需要toolbox里面的内容(也就是加粗的部分) // 基于准备好的dom,初始化echarts实例 var day = echarts.init ...
- echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向 option1: {color: ['#21E9F6', '#F2CE2E', '#EE2929', '#006DD9', '#1789FF ...
- echarts画折线图和数据excel导出
最近一直使用echarts画折线图,在此做个记录 最后样式 代码 <!DOCTYPE html> <html style="height: 100%">&l ...
- echarts动态折线图拉扯变形问题
echarts动态折线图拉扯变形问题 在使用echarts折线图 做动态数据展示时,发现一个bug 当折线图的一个数值较高点紧挨着一个数值为零的点,guyong时图形会被拉扯,应该是echart的bu ...
- Echarts实现折线图Y轴不等距百分比（最终解决方案）
Echarts实现折线图Y轴不等距百分比(最终解决方案-上集) 出现背景 解决思路 总结 附加 出现背景 最近公司有一个需求,主要是想展示近7日产品的一个良品率(百分率制).但是呢,基本上每天这个 ...
- 使用 Echarts 实现折线图中线条添加、删除、编辑
使用 Echarts 实现折线图中线条添加.删除.编辑 小帅 小白,也能改变浪花的方向,公众号:51reboot运维开发 介绍一下使用 Echarts 做数据统计分析,如何实现支持折线图的添加.删除. ...
- vue引入Echarts画折线图、平滑曲线图、转化数学公式详解
目录 1 引入Echarts 1.1 安装 1.2 引入 1.3 基本使用 2 基本折线图 3 复杂折线图 3.1 多条折线 3.2 动态变化折线图 4 笛卡尔坐标系中的折线图 5 平滑曲线图 6 折 ...
- echarts切换折线图变大_这个月，我就和折线图杠上了...
作者 hustcc 蚂蚁金服·数据体验技术团队 TL;DR G2Plot 是一个注重于细节体验的通用统计图表库. 背景 折线图用于表示连续时间跨度内的数据,它通常用于显示某变量随时间的变化模式:是上升 ...
最新文章
- 1.1 回归问题-机器学习笔记-斯坦福吴恩达教授
- ACM在线测评系统评测程序设计与python实现
- MVC4 WebAPI(一)
- java通信项目_Java项目中的多线程通信如何利用Socket实现
- python基础入门（9）之字典
- python装饰器性能_python装饰器的特性原理详解
- raspberry pi_如何购买Raspberry Pi
- MapReduce整体架构分析
- 反射 java 例子 get_Java反射实例
- Coursera ML 逻辑回归与正则化
- [arduino]-序言：面向仅有C语言基础之人的单片机开发板
- AJAX——ASP.NET AJAX框架（一）ScriptManager
- c语言中judge的用法,judge的用法
- python中的文字怎么居中_各位大神，wxPython中，怎么让text文本居中显示？
- appcan ajax mysql_APPCAN MAS接口之AJAX
- #655 – 冒泡事件可能会被某些控件屏蔽(Bubbling Mouse Events Swallowed by Some Controls)
- [几何] BZOJ 4246 两个人的星座
- 《北洋军阀统治时期的政治经济与文化》教学设计
- 使用Pandas处理美国人口数据
- angularjs表单验证_AngularJS表单验证
热门文章
- asp.net网站中CrystalReport的简单应用
- mysql定位前后端问题_Web 前后端分离的意义大吗？
- c语言0x00如何不截断_binary 和 varbinary 用法全解
- zeekooper集群搭建_How to do - ZooKeeper集群搭建（我见过最详细的完整教学）
- 下取整函数的含义_Excel将3.14159取值为3.15或3.1415? 两个函数为你效劳，拿走不谢...
- rhino6.0安装教程
- 刚开始学C 语言 怎么编写小程序,用C 语言 程序怎么样编写一个小程序 工具
- java线程删除文件,线程“main”java.io.jgitinernalexception中的异常:无法删除临时文件c:\users\13 dec...
- python 一次性定时器_python 定时器每天就执行一次的实现代码
- svm加载数据集并预测