devbox
Monodyee
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uni-app中使用echarts教程_uniapp echarts

作者：Monodyee | 2024-02-21 13:01:12

赞

踩

uniapp echarts

涉及到的几个目录

一、下载echart

   方法一：从下载的源代码或编译产物安装

        

  方法二：从 npm 安装

       npm install echarts

  方法三：选择需要的模块，在线定制下载

     下载 - Apache ECharts

      即echarts.min.js  下载

二、引入

import echarts from '@/components/echarts/echarts.vue';

下面的是 echarts.vue的代码   您可以在components 创建一个echarts的文件夹里面放echarts.vue

代码里script.src = './static/echarts.min.js'   （更改路径不行的话，还是建议使用此路径） 在【4里面】

  1. <template>
  2. 	<view>
  3. 		<view class="echarts" :prop="option" :change:prop="echarts.update"></view>
  4. 	</view>
  5. </template>
  6.  
  7. <script>
  8. 	export default {
  9. 		name: 'Echarts',
  10. 		props: {
  11. 			option: {
  12. 				type: Object,
  13. 				required: true
  14. 			}
  15. 		}
  16. 	}
  17. </script>
  18.  
  19. <script module="echarts" lang="renderjs">
  20. 	export default {
  21. 		data() {
  22. 			return {
  23. 				chart: null
  24. 			}
  25. 		},
  26. 		mounted() {
  27. 			if (typeof window.echarts === 'object') {
  28. 				this.init()
  29. 			} else {
  30. 				// 动态引入类库
  31. 				const script = document.createElement('script')
  32. 				script.src = './static/echarts.min.js'
  33. 				// script.src = './static/echarts/echarts.min.js'
  34. 				script.onload = this.init
  35. 				document.head.appendChild(script)
  36. 			}
  37. 		},
  38. 		methods: {
  39. 			/**
  40. 			 * 初始化echarts
  41. 			 */
  42. 			init() {
  43. 				this.chart = echarts.init(this.$el)
  44. 				this.update(this.option)
  45. 			},
  46. 			/**
  47. 			 * 监测数据更新
  48. 			 * @param {Object} option
  49. 			 */
  50. 			update(option) {
  51. 				if (this.chart) {
  52. 					// 因App端，回调函数无法从renderjs外传递，故在此自定义设置相关回调函数
  53. 					if (option) {
  54. 						// tooltip
  55. 						if (option.tooltip) {
  56. 							// 判断是否设置tooltip的位置
  57. 							if (option.tooltip.positionStatus) {
  58. 								option.tooltip.position = this.tooltipPosition()
  59. 							}
  60. 							// 判断是否格式化tooltip
  61. 							if (option.tooltip.formatterStatus) {
  62. 								option.tooltip.formatter = this.tooltipFormatter(option.tooltip.formatterUnit, option.tooltip.formatFloat2, option.tooltip.formatThousands)
  63. 							}
  64. 						}
  65.                     // 设置新的option
  66. 					this.chart.setOption(option, option.notMerge)
  67. 					}
  68. 					
  69. 				}
  70. 			},
  71. 			/**
  72. 			 * 设置tooltip的位置，防止超出画布
  73. 			 */
  74. 			tooltipPosition() {
  75. 				return (point, params, dom, rect, size) => {
  76. 					//其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
  77. 					let x = point[0]
  78. 					let y = point[1]
  79. 					let viewWidth = size.viewSize[0]
  80. 					let viewHeight = size.viewSize[1]
  81. 					let boxWidth = size.contentSize[0]
  82. 					let boxHeight = size.contentSize[1]
  83. 					let posX = 0 //x坐标位置
  84. 					let posY = 0 //y坐标位置
  85. 					if (x < boxWidth) { //左边放不开
  86. 						posX = 5
  87. 					} else { //左边放的下
  88. 						posX = x - boxWidth
  89. 					}
  90. 					if (y < boxHeight) { //上边放不开
  91. 						posY = 5
  92. 					} else { //上边放得下
  93. 						posY = y - boxHeight
  94. 					}
  95. 					return [posX, posY]
  96. 				}
  97. 			},
  98. 			/**
  99. 			 * tooltip格式化
  100. 			 * @param {Object} unit 数值后的单位
  101. 			 * @param {Object} formatFloat2 是否保留两位小数
  102. 			 * @param {Object} formatThousands 是否添加千分位
  103. 			 */
  104. 			tooltipFormatter(unit, formatFloat2, formatThousands) {
  105. 				return params => {
  106. 					let result = ''
  107. 					unit = unit ? unit : ''
  108. 					for (let i in params) {
  109. 						if (i == 0) {
  110. 							result += params[i].axisValueLabel
  111. 						}
  112. 						let value = '--'
  113. 						if (params[i].data !== null) {
  114. 							value = params[i].data
  115. 							// 保留两位小数
  116. 							if (formatFloat2) {
  117. 								value = this.formatFloat2(value)
  118. 							}
  119. 							// 添加千分位
  120. 							if (formatThousands) {
  121. 								value = this.formatThousands(value)
  122. 							}
  123. 						}
  124. 						// #ifdef H5
  125. 						result += '\n' + params[i].seriesName + '：' + value + ' ' + unit
  126. 						// #endif
  127. 						
  128. 						// #ifdef APP-PLUS
  129. 						result += '<br/>' + params[i].marker + params[i].seriesName + '：' + value + ' ' + unit
  130. 						// #endif
  131. 					}
  132. 					return result
  133. 				}
  134. 			},
  135. 			/**
  136. 			 * 保留两位小数
  137. 			 * @param {Object} value
  138. 			 */
  139. 			formatFloat2(value) {
  140. 				let temp = Math.round(parseFloat(value) * 100) / 100
  141. 				let xsd = temp.toString().split('.')
  142. 				if (xsd.length === 1) {
  143. 					temp = (isNaN(temp) ? '0' : temp.toString()) + '.00'
  144. 					return temp
  145. 				}
  146. 				if (xsd.length > 1) {
  147. 					if (xsd[1].length < 2) {
  148. 						temp = temp.toString() + '0'
  149. 					}
  150. 					return temp
  151. 				}
  152. 			},
  153. 			/**
  154. 			 * 添加千分位
  155. 			 * @param {Object} value
  156. 			 */
  157. 			formatThousands(value) {
  158. 				if (value === undefined || value === null) {
  159. 					value = ''
  160. 				}
  161. 				if (!isNaN(value)) {
  162. 					value = value + ''
  163. 				}
  164. 				let re = /\d{1,3}(?=(\d{3})+$)/g
  165. 				let n1 = value.replace(/^(\d+)((\.\d+)?)$/, function(s, s1, s2) {
  166. 					return s1.replace(re, '$&,') + s2
  167. 				})
  168. 				return n1
  169. 			}
  170. 		}
  171. 	}
  172. </script>
  173.  
  174. <style lang="scss" scoped>
  175. 	.echarts {
  176. 		width: 100%;
  177. 		height: 100%;
  178. 	}
  179. </style>

5、随便起一个Vue页面 复制下面代码demo测试

  1. <template>
  2. 	<view class="viewimg">
  3. 		<view>
  4. 			<view>echarts示列</view>
  5. 			<echarts :option="option" style="height: 300px;"></echarts>
  6. 			<button @click="updateClick">更新数据</button>
  7. 		</view>
  8. 		<view>
  9. 			<echarts :option="optionone" style="height: 400px;"></echarts>
  10. 		</view>
  11. 		<view>
  12. 			<echarts :option="optiontwo" style="height: 400px;"></echarts>
  13. 		</view>
  14. 	</view>
  15. </template>
  16.  
  17. <script>
  18. 	import echarts from '@/components/echarts/echarts.vue';
  19. 	export default {
  20. 		data() {
  21. 			return {
  22. 				option: {},
  23. 				optionone: {},
  24. 				optiontwo: {}
  25. 			};
  26. 		},
  27. 		onLoad() {
  28. 			// console.log(777777);
  29. 		},
  30. 		components: {
  31. 			echarts
  32. 		},
  33. 		mounted() {
  34. 			this.logstatrt();
  35. 			this.logstatrtone();
  36. 			this.logstatrttwo();
  37. 		},
  38. 		methods: {
  39. 			logstatrt() {
  40. 				// console.log('初次调用');
  41. 				this.option = {
  42. 					backgroundColor: '#011246',
  43. 					tooltip: {
  44. 						trigger: 'axis',
  45. 						axisPointer: {
  46. 							type: 'shadow'
  47. 						}
  48. 					},
  49. 					grid: {
  50. 						top: '25%',
  51. 						right: '45',
  52. 						bottom: '20',
  53. 						left: '30'
  54. 					},
  55. 					legend: {
  56. 						data: [{
  57. 							name: '人保'
  58. 						}, {
  59. 							name: '太保'
  60. 						}, {
  61. 							name: '平安'
  62. 						}, {
  63. 							name: '人保增速'
  64. 						}, {
  65. 							name: '太保增速'
  66. 						}, {
  67. 							name: '平安增速'
  68. 						}],
  69. 						top: '0%',
  70. 						textStyle: {
  71. 							color: 'rgba(255,255,255,0.9)' //图例文字
  72. 						}
  73. 					},
  74. 					dataZoom: [{
  75. 						type: 'slider',
  76. 						realtime: true,
  77. 						//移动端展示方式
  78. 						handleSize: '100%', //滑动条两侧的大小
  79. 						start: 0,
  80. 						end: 50
  81. 					}],
  82. 					grid: {
  83. 						left: '3%',
  84. 						right: '4%',
  85. 						bottom: '15%',
  86. 						height: '70%',
  87. 						containLabel: true
  88. 					},
  89. 					xAxis: [{
  90. 						type: 'category',
  91. 						data: ['2015', '2016', '2017', '2018', '2019'],
  92. 						axisLine: {
  93. 							lineStyle: {
  94. 								color: 'rgba(255,255,255,.1)'
  95. 							}
  96. 						},
  97. 						axisLabel: {
  98. 							textStyle: {
  99. 								color: 'rgba(255,255,255,.7)',
  100. 								fontSize: '14'
  101. 							}
  102. 						}
  103. 					}],
  104. 					yAxis: [{
  105. 							type: 'value',
  106. 							name: '单位万',
  107. 							splitLine: {
  108. 								show: false
  109. 							},
  110. 							axisLabel: {
  111. 								show: true,
  112. 								fontSize: 14,
  113. 								color: 'rgba(255,255,255,.6)'
  114. 							},
  115. 							axisLine: {
  116. 								min: 0,
  117. 								max: 10,
  118. 								lineStyle: {
  119. 									color: 'rgba(255,255,255,.4)'
  120. 								}
  121. 							} //左线色
  122. 						},
  123. 						{
  124. 							type: 'value',
  125. 							name: '增速',
  126. 							show: true,
  127. 							axisLabel: {
  128. 								show: true,
  129. 								fontSize: 14,
  130. 								formatter: '{value} %',
  131. 								color: 'rgba(255,255,255,.6)'
  132. 							},
  133. 							axisLine: {
  134. 								lineStyle: {
  135. 									color: 'rgba(255,255,255,.4)'
  136. 								}
  137. 							}, //右线色
  138. 							splitLine: {
  139. 								show: true,
  140. 								lineStyle: {
  141. 									color: 'rgba(255,255,255,.1)'
  142. 								}
  143. 							} //x轴线
  144. 						}
  145. 					],
  146. 					series: [{
  147. 							name: '人保',
  148. 							type: 'bar',
  149. 							data: [35, 36.6, 38.8, 40.84, 41.6],
  150. 							// "barWidth": "30",
  151. 							itemStyle: {
  152. 								normal: {
  153. 									color: {
  154. 										type: 'linear',
  155. 										x: 0.5,
  156. 										y: 0.5,
  157. 										r: 0.5,
  158. 										colorStops: [{
  159. 												offset: 0,
  160. 												color: '#00FFE3' // 0% 处的颜色
  161. 											},
  162. 											{
  163. 												offset: 1,
  164. 												color: '#4693EC' // 100% 处的颜色
  165. 											}
  166. 										],
  167. 										globalCoord: false // 缺省为 false
  168. 									}
  169. 								}
  170. 							}
  171. 							// "barGap": "0.2"
  172. 						},
  173. 						{
  174. 							name: '太保',
  175. 							type: 'bar',
  176. 							data: [16, 14.8, 14.1, 15, 16.3],
  177.  
  178. 							color: {
  179. 								type: 'linear',
  180. 								x: 0.5,
  181. 								y: 0.5,
  182. 								r: 0.5,
  183. 								colorStops: [{
  184. 										offset: 0,
  185. 										color: '#248ff7' // 0% 处的颜色
  186. 									},
  187. 									{
  188. 										offset: 1,
  189. 										color: '#6851f1' // 100% 处的颜色
  190. 									}
  191. 								],
  192. 								globalCoord: false // 缺省为 false
  193. 							}
  194. 						},
  195. 						{
  196. 							name: '平安',
  197. 							type: 'bar',
  198. 							data: [10.2, 9.2, 9.1, 9.85, 8.9],
  199. 							color: {
  200. 								type: 'linear',
  201. 								x: 0.5,
  202. 								y: 0.5,
  203. 								r: 0.5,
  204. 								colorStops: [{
  205. 										offset: 0,
  206. 										color: '#fccb05' // 0% 处的颜色
  207. 									},
  208. 									{
  209. 										offset: 1,
  210. 										color: '#f5804d' // 100% 处的颜色
  211. 									}
  212. 								],
  213. 								globalCoord: false // 缺省为 false
  214. 							}
  215. 						},
  216. 						{
  217. 							name: '人保增速',
  218. 							type: 'line',
  219. 							yAxisIndex: 1,
  220.  
  221. 							data: [0, 6.01, 5.26, 1.48],
  222. 							lineStyle: {
  223. 								normal: {
  224. 									width: 2
  225. 								}
  226. 							},
  227. 							itemStyle: {
  228. 								normal: {
  229. 									color: '#86d370'
  230. 								}
  231. 							},
  232. 							smooth: true
  233. 						},
  234. 						{
  235. 							name: '太保增速',
  236. 							type: 'line',
  237. 							yAxisIndex: 1,
  238.  
  239. 							data: [0, -4.73, 6.38, 8.67],
  240. 							lineStyle: {
  241. 								normal: {
  242. 									width: 2
  243. 								}
  244. 							},
  245. 							itemStyle: {
  246. 								normal: {
  247. 									color: '#3496f8'
  248. 								}
  249. 							},
  250. 							smooth: true
  251. 						},
  252. 						{
  253. 							name: '平安增速',
  254. 							type: 'line',
  255. 							yAxisIndex: 1,
  256.  
  257. 							data: [0, -1.09, 8.24, -9.64],
  258. 							lineStyle: {
  259. 								normal: {
  260. 									width: 2
  261. 								}
  262. 							},
  263. 							itemStyle: {
  264. 								normal: {
  265. 									color: '#fbc30d'
  266. 								}
  267. 							},
  268. 							smooth: true
  269. 						}
  270. 					]
  271. 				};
  272. 			},
  273. 			logstatrtone() {
  274. 				this.optionone = {
  275. 					backgroundColor: '#0c1e55',
  276.  
  277. 					color: ['#00a0fc', '#ffe400', '#ff9a09', '#ef1e5f', '#23cbe5', '#ec561b', '#ffa500', '#dddf00', '#b23aee',
  278. 						'#50b332'
  279. 					],
  280.  
  281. 					tooltip: {
  282. 						trigger: 'item',
  283. 						// formatter: "   {a} <br/>{b} : {c} ({d}%)"
  284. 						formatter: "   企业数：{c}"
  285. 					},
  286. 					legend: { // 图例-图上面的分类
  287. 						// orient: 'vertical',
  288. 						// right: 30,
  289. 						//   icon: 'rect',//长方形
  290. 						icon: 'circle',
  291. 						top: "1%",
  292. 						itemWidth: 10,
  293. 						itemHeight: 10,
  294. 						// itemGap: 13,
  295. 						data: ['16℃以下', '16-18℃', '18-20℃', '20-22℃', '22-24℃', '24-26℃', '26℃以上'],
  296. 						// right: '56%',
  297. 						textStyle: {
  298. 							fontSize: 14,
  299. 							color: '#a6cde8',
  300. 							lineHeight: 49
  301. 						},
  302. 						formatter: function(name) {
  303. 							return "" + name + ""
  304. 						},
  305. 						padding: [2, 2]
  306. 					},
  307. 					grid: {
  308. 						top: '20%',
  309. 						left: '53%',
  310. 						right: '10%',
  311. 						bottom: '6%',
  312. 						containLabel: true
  313. 					},
  314.  
  315. 					series: [{
  316. 						label: {
  317. 							normal: {
  318. 								formatter: '{b|{b}：} {c} \n  {per|{d}%} ',
  319. 								rich: {}
  320. 							},
  321. 							emphasis: {
  322. 								show: true,
  323. 							}
  324. 						},
  325. 						// labelLine: {
  326. 						//     normal: {
  327. 						//         show: false
  328. 						//     }
  329. 						// },
  330. 						name: '访问来源',
  331. 						type: 'pie',
  332. 						radius: '55%',
  333. 						center: ['50%', '60%'],
  334. 						data: [{
  335. 								value: 195,
  336. 								name: '16℃以下'
  337. 							},
  338. 							{
  339. 								value: 185,
  340. 								name: '16-18℃'
  341. 							},
  342. 							{
  343. 								value: 260,
  344. 								name: '18-20℃'
  345. 							},
  346. 							{
  347. 								value: 213,
  348. 								name: '20-22℃'
  349. 							},
  350. 							{
  351. 								value: 52,
  352. 								name: '22-24℃'
  353. 							},
  354. 							{
  355. 								value: 35,
  356. 								name: '24-26℃'
  357. 							},
  358. 							{
  359. 								value: 46,
  360. 								name: '26℃以上'
  361. 							},
  362. 						],
  363. 						itemStyle: {
  364. 							emphasis: {
  365. 								shadowBlur: 10,
  366. 								shadowOffsetX: 0,
  367. 								shadowColor: 'rgba(0, 0, 0, 0.5)'
  368. 							}
  369. 						},
  370. 						labelLine: {
  371. 							normal: {
  372. 								length: 5,
  373. 								length2: 1,
  374. 								smooth: true,
  375. 							}
  376. 						},
  377. 					}]
  378. 				};
  379. 			},
  380. 			logstatrttwo() {
  381. 				var m2R2Data = [{
  382. 						value: 335,
  383. 						value1: 234,
  384. 						legendname: 'Ⅰ类',
  385. 						name: "Ⅰ类",
  386. 						itemStyle: {
  387. 							color: "#8d7fec"
  388. 						}
  389. 					},
  390. 					{
  391. 						value: 310,
  392. 						value1: 314,
  393. 						legendname: 'Ⅱ类',
  394. 						name: "Ⅱ类",
  395. 						itemStyle: {
  396. 							color: "#5085f2"
  397. 						}
  398. 					},
  399. 					{
  400. 						value: 234,
  401. 						value1: 235,
  402. 						legendname: 'Ⅲ类',
  403. 						name: "Ⅲ类",
  404. 						itemStyle: {
  405. 							color: "#e75fc3"
  406. 						}
  407. 					},
  408. 					{
  409. 						value: 154,
  410. 						value1: 213,
  411. 						legendname: 'Ⅳ类',
  412. 						name: "Ⅳ类",
  413. 						itemStyle: {
  414. 							color: "#f87be2"
  415. 						}
  416. 					},
  417. 					{
  418. 						value: 335,
  419. 						value1: 321,
  420. 						legendname: 'Ⅴ类',
  421. 						name: "Ⅴ类",
  422. 						itemStyle: {
  423. 							color: "#f2719a"
  424. 						}
  425. 					},
  426.  
  427. 				];
  428.  
  429. 				this.optiontwo = {
  430. 					title: [{
  431. 							text: '全网调控情况',
  432. 							textStyle: {
  433. 								fontSize: 16,
  434. 								color: "black"
  435. 							},
  436. 							left: "35%"
  437. 						},
  438. 						{
  439. 							text: '全网均温',
  440. 							subtext: 44.5 + '℃',
  441. 							textStyle: {
  442. 								fontSize: 15,
  443. 								color: "black"
  444. 							},
  445. 							subtextStyle: {
  446. 								fontSize: 20,
  447. 								color: 'black'
  448. 							},
  449. 							textAlign: "center",
  450. 							x: '40%',
  451. 							y: '44%',
  452. 						}
  453. 					],
  454. 					tooltip: {
  455. 						trigger: 'item',
  456. 						formatter: function(parms) {
  457. 							var str = parms.seriesName + "</br>" +
  458. 								parms.marker + "" + parms.data.legendname + "</br>" +
  459. 								"当前温度：" + parms.data.value + "</br>" +
  460. 								"目标温度：" + parms.data.value1 + "</br>" +
  461. 								"占比：" + parms.percent + "%";
  462. 							return str;
  463. 						}
  464. 					},
  465. 					legend: {
  466. 						type: "scroll",
  467. 						orient: 'vertical',
  468. 						left: '80%',
  469. 						align: 'left',
  470. 						top: 'middle',
  471. 						textStyle: {
  472. 							color: '#8C8C8C'
  473. 						},
  474.  
  475. 					},
  476. 					series: [{
  477. 						name: '全网调控情况',
  478. 						type: 'pie',
  479. 						center: ['40%', '50%'],
  480. 						radius: ['40%', '65%'],
  481. 						clockwise: false, //饼图的扇区是否是顺时针排布
  482. 						avoidLabelOverlap: false,
  483. 						itemStyle: { //图形样式
  484. 							normal: {
  485. 								borderColor: '#ffffff',
  486. 								borderWidth: 1,
  487. 							},
  488. 						},
  489. 						label: {
  490. 							normal: {
  491. 								show: true,
  492. 								position: 'outter',
  493. 								formatter: function(parms) {
  494. 									return parms.data.legendname
  495. 								}
  496. 							}
  497. 						},
  498. 						labelLine: {
  499. 							normal: {
  500. 								length: 15,
  501. 								length2: 13,
  502. 								smooth: true,
  503. 							}
  504. 						},
  505. 						data: m2R2Data
  506. 					}]
  507. 				};
  508. 			},
  509. 			/**
  510. 			 * 更新数据
  511. 			 */
  512. 			updateClick() {
  513. 				this.option.series=[{
  514. 							name: '人保',
  515. 							type: 'bar',
  516. 							data: [10, 10, 10, 10, 10],
  517. 							// "barWidth": "30",
  518. 							itemStyle: {
  519. 								normal: {
  520. 									color: {
  521. 										type: 'linear',
  522. 										x: 0.5,
  523. 										y: 0.5,
  524. 										r: 0.5,
  525. 										colorStops: [{
  526. 												offset: 0,
  527. 												color: '#00FFE3' // 0% 处的颜色
  528. 											},
  529. 											{
  530. 												offset: 1,
  531. 												color: '#4693EC' // 100% 处的颜色
  532. 											}
  533. 										],
  534. 										globalCoord: false // 缺省为 false
  535. 									}
  536. 								}
  537. 							}
  538. 							// "barGap": "0.2"
  539. 						},
  540. 						{
  541. 							name: '太保',
  542. 							type: 'bar',
  543. 							data: [16, 14.8, 14.1, 15, 16.3],
  544.  
  545. 							color: {
  546. 								type: 'linear',
  547. 								x: 0.5,
  548. 								y: 0.5,
  549. 								r: 0.5,
  550. 								colorStops: [{
  551. 										offset: 0,
  552. 										color: '#248ff7' // 0% 处的颜色
  553. 									},
  554. 									{
  555. 										offset: 1,
  556. 										color: '#6851f1' // 100% 处的颜色
  557. 									}
  558. 								],
  559. 								globalCoord: false // 缺省为 false
  560. 							}
  561. 						},
  562. 						{
  563. 							name: '平安',
  564. 							type: 'bar',
  565. 							data: [10.2, 9.2, 9.1, 9.85, 8.9],
  566. 							color: {
  567. 								type: 'linear',
  568. 								x: 0.5,
  569. 								y: 0.5,
  570. 								r: 0.5,
  571. 								colorStops: [{
  572. 										offset: 0,
  573. 										color: '#fccb05' // 0% 处的颜色
  574. 									},
  575. 									{
  576. 										offset: 1,
  577. 										color: '#f5804d' // 100% 处的颜色
  578. 									}
  579. 								],
  580. 								globalCoord: false // 缺省为 false
  581. 							}
  582. 						},
  583. 						{
  584. 							name: '人保增速',
  585. 							type: 'line',
  586. 							yAxisIndex: 1,
  587.  
  588. 							data: [0, 6.01, 5.26, 1.48],
  589. 							lineStyle: {
  590. 								normal: {
  591. 									width: 2
  592. 								}
  593. 							},
  594. 							itemStyle: {
  595. 								normal: {
  596. 									color: '#86d370'
  597. 								}
  598. 							},
  599. 							smooth: true
  600. 						},
  601. 						{
  602. 							name: '太保增速',
  603. 							type: 'line',
  604. 							yAxisIndex: 1,
  605.  
  606. 							data: [0, -4.73, 6.38, 8.67],
  607. 							lineStyle: {
  608. 								normal: {
  609. 									width: 2
  610. 								}
  611. 							},
  612. 							itemStyle: {
  613. 								normal: {
  614. 									color: '#3496f8'
  615. 								}
  616. 							},
  617. 							smooth: true
  618. 						},
  619. 						{
  620. 							name: '平安增速',
  621. 							type: 'line',
  622. 							yAxisIndex: 1,
  623.  
  624. 							data: [0, -1.09, 8.24, -9.64],
  625. 							lineStyle: {
  626. 								normal: {
  627. 									width: 2
  628. 								}
  629. 							},
  630. 							itemStyle: {
  631. 								normal: {
  632. 									color: '#fbc30d'
  633. 								}
  634. 							},
  635. 							smooth: true
  636. 						}
  637. 					]
  638. 				// this.option = {
  639. 				// 	notMerge: true, // 自定义变量：true代表不合并数据，比如从折线图变为柱形图则需设置为true；false或不写代表合并
  640. 				// 	xAxis: {
  641. 				// 		type: 'category',
  642. 				// 		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  643. 				// 	},
  644. 				// 	yAxis: {
  645. 				// 		type: 'value'
  646. 				// 	},
  647. 				// 	series: [{
  648. 				// 		data: [120, 200, 150, 80, 70, 110, 130],
  649. 				// 		type: 'bar',
  650. 				// 		showBackground: true,
  651. 				// 		backgroundStyle: {
  652. 				// 			color: 'rgba(220, 220, 220, 0.8)'
  653. 				// 		}
  654. 				// 	}]
  655. 				// };
  656. 			}
  657. 		}
  658. 	};
  659. </script>
  660. <style>
  661. 	.viewimg {
  662. 		height: 100%;
  663. 		/* background: #d1e9e9; */
  664. 	}
  665. </style>
  666.

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/123939
推荐阅读

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。