smartFactory/components/lime-echart/lime-echart.nvue

<template>
	<view style="width: 100%; height: 408px;">
		<l-echart ref="chartRef" @finished="init"></l-echart>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showTip: false,
				option: {
					tooltip: {
						trigger: 'axis',
						// shadowBlur: 0,
						textStyle: {
							textShadowBlur: 0
						},
						renderMode: 'richText',
					},
					legend: {
						data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
					},
					yAxis: {
						type: 'value'
					},
					series: [
						{
							name: '邮件营销',
							type: 'line',
							stack: '总量',
							data: [120, 132, 101, 134, 90, 230, 210]
						},
						{
							name: '联盟广告',
							type: 'line',
							stack: '总量',
							data: [220, 182, 191, 234, 290, 330, 310]
						},
						{
							name: '视频广告',
							type: 'line',
							stack: '总量',
							data: [150, 232, 201, 154, 190, 330, 410]
						},
						{
							name: '直接访问',
							type: 'line',
							stack: '总量',
							data: [320, 332, 301, 334, 390, 330, 320]
						},
						{
							name: '搜索引擎',
							type: 'line',
							stack: '总量',
							data: [820, 932, 901, 934, 1290, 1330, 1320]
						}
					]
				}
			}
		},
		mounted() {
			console.log('lime echarts nvue')
		},
		methods: {
			init() {
				const chartRef = this.$refs['chartRef']
				chartRef.init(chart => {
					chart.setOption(this.option);
					
					
					setTimeout(()=>{
						const option = {
							tooltip: {
								trigger: 'axis',
								// shadowBlur: 0,
								textStyle: {
									textShadowBlur: 0
								},
								renderMode: 'richText',
							},
							legend: {
								data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
							},
							grid: {
								left: '3%',
								right: '4%',
								bottom: '3%',
								containLabel: true
							},
							xAxis: {
								type: 'category',
								boundaryGap: false,
								data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
							},
							yAxis: {
								type: 'value'
							},
							series: [
								{
									name: '邮件营销',
									type: 'line',
									stack: '总量',
									data: [120, 132, 101, 134, 90, 230, 210]
								},
								{
									name: '联盟广告',
									type: 'line',
									stack: '总量',
									data: [220, 182, 191, 234, 290, 330, 310]
								},
								{
									name: '视频广告',
									type: 'line',
									stack: '总量',
									data: [150, 232, 201, 154, 190, 330, 410]
								},
								{
									name: '直接访问',
									type: 'line',
									stack: '总量',
									data: [320, 332, 301, 334, 390, 330, 320]
								},
								{
									name: '搜索引擎',
									type: 'line',
									stack: '总量',
									data: [820, 932, 901, 934, 1290, 1330, 1320]
								}
							]
						}
						chart.setOption(option);
					},1000)
				})
			},
			save() {
				// this.$refs.chart.canvasToTempFilePath({
				// 	success(res) {
				// 		console.log('res::::', res)
				// 	}
				// })
			}
		}
	}
</script>
<style>

</style>