vue+echarts繪制折線圖、柱狀圖和扇形圖教程

更新時(shí)間：2023年03月27日 16:30:15 作者：JeffreytheCoder

這篇文章主要介紹了vue+echarts繪制折線圖、柱狀圖和扇形圖教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

一、折線圖

折線圖中，series要包含每條折線的數(shù)據(jù)。

<template>
    <div id="myChart"></div>
</template>

<script>
import echarts from 'echarts'	// 引入echarts
export default {
    name: 'LineChart',
    data () {
        return {
            echartsOption: {	// echarts選項(xiàng)，所有繪圖數(shù)據(jù)和樣式都在這里設(shè)置
                legend: {	//圖表上方的圖例
                    data: ['騰訊', '阿里巴巴', '華為', '字節(jié)跳動(dòng)']
                },
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],   // x軸數(shù)據(jù)
                    name: '日期',   // x軸名稱
                    nameTextStyle: {	// x軸名稱樣式
                        fontWeight: 600,
                        fontSize: 18
                    }
                },
                yAxis: {
	                type: 'value',
	                name: '市值',   // y軸名稱
	                nameTextStyle: {	// y軸名稱樣式
	                    fontWeight: 600,
	                    fontSize: 18
	                }
                },
                tooltip: {   //鼠標(biāo)放到圖上的數(shù)據(jù)展示樣式
                    trigger: 'axis'
                },
                series: [	//每條折線的數(shù)據(jù)系列
                    {
                        name: '騰訊',
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line'
                    },
                    {
                        name: '阿里巴巴',
                        data: [620, 711, 823, 934, 1445, 1456, 1178],
                        type: 'line'
                    },
                    {
                        name: '華為',
                        data: [612, 920, 1140, 1160, 1190, 1234, 1321],
                        type: 'line'
                    },
                    {
                        name: '字節(jié)跳動(dòng)',
                        data: [234, 320, 453, 567, 789, 999, 1200],
                        type: 'line'
                    }
                ],
            }
        }
    },
    mounted () {
        let myChart = echarts.init(document.getElementById('myChart'), 'light')	// 初始化echarts, theme為light
        myChart.setOption(this.echartsOption)	// echarts設(shè)置選項(xiàng)
    }
}
</script>

<style>
#myChart{
  width: 100%;
  height: 500px;
  margin: 0 auto;
  margin-top: 5%;
}
</style>

效果圖

在這里插入圖片描述

二、柱狀圖

柱狀圖中，要在series加入每個(gè)bar的數(shù)據(jù)。

<template>
    <div id="myChart"></div>
</template>

<script>
import echarts from 'echarts'	// 引入echarts
export default {
    name: 'LineChart',
    data () {
        return {
            echartsOption: {	// echarts選項(xiàng)，所有繪圖數(shù)據(jù)和樣式都在這里設(shè)置
                xAxis: {
                    type: 'category',
                    data: ['騰訊', '阿里巴巴', '華為', '字節(jié)跳動(dòng)'],   // x軸數(shù)據(jù)
                    name: '日期',   // x軸名稱
                    nameTextStyle: {	// x軸名稱樣式
                        fontWeight: 600,
                        fontSize: 18
                    }
                },
                yAxis: {
	                type: 'value',
	                name: '公司盈利率',   // y軸名稱
	                nameTextStyle: {	// y軸名稱樣式
	                    fontWeight: 600,
	                    fontSize: 18
	                }
                },
                tooltip: {   //鼠標(biāo)放到圖上的數(shù)據(jù)展示樣式
                    trigger: 'axis'
                },
                series: [{  //series中加入每個(gè)bar的數(shù)據(jù)
                  name: '公司盈利率',
                  type: 'bar',
                  barWidth: '60%',
                  data: [0.35, 0.2, 0.25, 0.15],
              }],
            }
        }
    },
    mounted () {
        let myChart = echarts.init(document.getElementById('myChart'), 'light')	// 初始化echarts, theme為light
        myChart.setOption(this.echartsOption)	// echarts設(shè)置選項(xiàng)
    }
}
</script>

<style>
#myChart{
  width: 100%;
  height: 500px;
  margin: 0 auto;
  margin-top: 5%;
}
</style>

效果圖

在這里插入圖片描述

三、扇形圖

扇形圖中不需要xAxis和yAxis，一個(gè)series的data加入每個(gè)類別的數(shù)據(jù)，格式為 {value, name}。

<template>
    <div id="myChart"></div>
</template>

<script>
import echarts from 'echarts'	// 引入echarts
export default {
    name: 'PieChart',
    data () {
        return {
            echartsOption: {	// echarts選項(xiàng)，所有繪圖數(shù)據(jù)和樣式都在這里設(shè)置
                legend: {	//圖表上方的圖例
                    data: ['騰訊', '阿里巴巴', '華為', '字節(jié)跳動(dòng)']
                },
                tooltip: {   //鼠標(biāo)放到圖上的數(shù)據(jù)展示樣式
                    trigger: 'axis'
                },
                series: [{
                  name: '公司市值占比',
                  type: 'pie',
                  barWidth: '60%',
                  data: [	// 扇形圖數(shù)據(jù)格式： {value, name}
                    {value: 0.35, name: '騰訊'},		// value不一定是比例，echarts會(huì)自動(dòng)轉(zhuǎn)換
                    {value: 0.2, name: '阿里巴巴'},
                    {value: 0.25, name: '華為'},
                    {value: 0.2, name: '字節(jié)跳動(dòng)'},
                  ],
                }],
            }
        }
    },
    mounted () {
        let myChart = echarts.init(document.getElementById('myChart'), 'light')	// 初始化echarts, theme為light
        myChart.setOption(this.echartsOption)	// echarts設(shè)置選項(xiàng)
    }
}
</script>

<style>
#myChart{
  width: 100%;
  height: 500px;
  margin: 0 auto;
  margin-top: 5%;
}
</style>

效果圖

在這里插入圖片描述