快捷導(dǎo)航

Vue之Echarts實現(xiàn)折線圖全過程

更新時間：2026年04月16日 14:21:30 作者：Sunshine_Jian

文章主要描述了在Vue項目中安裝并引入echart components插件的具體步驟,并解決了一些常見的錯誤,首先,創(chuàng)建了一個`test.vue`文件,然后引入并配置了ech六 five插件,最后,展示了一個成功的示意圖,并強調(diào)這是個人經(jīng)驗總結(jié),僅供參考

一、在項目里安裝

npm install echarts -S

二、新建test.vue

<template>
  <div id="test_app">
      <!--為echarts準(zhǔn)備一個具備大小的容器dom-->
    <div id="main" style="width: 100%;height: 520px;background:#fff"></div>
  </div>
</template>

三、引入echarts

為解決報錯：

import * as echarts from 'echarts';

或

const echarts = require('echarts');

 <script>
        import * as echarts from 'echarts'
</script>

四、代碼

<template>
  <div id="test_app">
      <!--echarts的容器-->
	<div id="main" style="width: 100%;height: 520px;background:#fff"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
		name: '',
		data() {
			return {
				charts: '',
				opinionData: ["155", "400", "900", "800", "300", "900", "270"]//數(shù)據(jù)
			}
		},
		methods: {
			drawLine(id) {
				this.charts = echarts.init(document.getElementById(id))
				this.charts.setOption({
                    title:{
                        left:'3%',
                        top:'5%',
                        text:"最近一周訂單數(shù)量",//標(biāo)題文本，支持使用 \n 換行。
                    },
					tooltip: {
						trigger: 'axis'
					},
					legend: {
                        align:'right',//文字在前圖標(biāo)在后
                        left:'3%',
                        top:'15%',
						data: ['近一周']
					},
					grid: {
                        top:'30%',
						left: '5%',
						right: '5%',
						bottom: '5%',
						containLabel: true
					},

					toolbox: {
						feature: {
							saveAsImage: {} //保存為圖片
						}
					},
					xAxis: {
						type: 'category',
                        boundaryGap:true,
                        axisTick:{
                            alignWithLabel:true //保證刻度線和標(biāo)簽對齊
                        },
                        data: ["周一","周二","周三","周四","周五","周六","周日"] //x坐標(biāo)的名稱
					
					},
					yAxis: {
						type: 'value',
						boundaryGap: true,
                        splitNumber:4, //縱坐標(biāo)數(shù)
                        interval:250 //強制設(shè)置坐標(biāo)軸分割間隔
					},

					series: [{
						name: '近一周',
						type: 'line', //折線圖line;柱形圖bar;餅圖pie
						stack: '總量',
                        areaStyle: {
                            //顯示區(qū)域顏色---漸變效果
                            color:{
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgb(255,200,213)' // 0% 處的顏色
                                }, {
                                    offset: 1, color: '#ffffff' // 100% 處的顏色
                                }],
                                global: false // 缺省為 false
                            }
                        },
                        itemStyle: {
							color: 'rgb(255,96,64)', //改變折線點的顏色
							lineStyle: {
								color: 'rgb(255,96,64)' //改變折線顏色
							}
                            
                        },
						data: this.opinionData
					}]
				})
			}
		},
		//調(diào)用
		mounted() {
			this.$nextTick(function() {
				this.drawLine('main')
			})
		}
	}
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
		list-style: none;
	}
</style>