vue使用ECharts實現(xiàn)折線圖和餅圖
更新時間：2021年09月27日 09:54:57 作者：程序員na
這篇文章主要為大家詳細(xì)介紹了vue使用ECharts實現(xiàn)折線圖和餅圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
在開發(fā)后臺管理項目時，需要統(tǒng)計后臺用戶數(shù)據(jù)，以折線圖和餅圖的形式顯示，這邊采用apache-echarts來實現(xiàn)需求。
1.安裝echarts和引入
npm install echarts --save import * as echarts from 'echarts';
2.使用echarts實現(xiàn)pie圖
<template>
<div id="chartPie" class="pie-wrap"></div>
</template>
<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons');//引入主題
export default {
data() {
return {
chartPie: null
}
},
mounted() {
this.$nextTick(() => {
this.drawPieChart();
})
},
methods: {
drawPieChart() {
let mytextStyle = {
color: "#333",
fontSize: 18,
};
let mylabel = {
show: true,
position: "right",
offset: [30, 40],
formatter: ' : {c} (ublnpf9mb%)',
textStyle: mytextStyle
};
this.chartPie = echarts.init(document.getElementById('chartPie'),'macarons');
this.chartPie.setOption({
title: {
text: 'Pie Chart',
subtext: '純屬虛構(gòu)',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/> : {c} (ublnpf9mb%)",
},
legend: {
data: ['直接訪問', '郵件營銷', '聯(lián)盟廣告', '視頻廣告', '搜索引擎'],
left:"center",
top:"bottom",
orient:"horizontal",
},
series: [
{
name: '訪問來源',
type: 'pie',
radius: ['50%', '70%'],
center: ['50%', '50%'],
data: [
{value: 335, name: '直接訪問'},
{value: 310, name: '郵件營銷'},
{value: 234, name: '聯(lián)盟廣告'},
{value: 135, name: '視頻廣告'},
{value: 1548, name: '搜索引擎'}
],
animationEasing: 'cubicInOut',
animationDuration: 2600,
label: {
emphasis: mylabel
}
}
]
});
}
}
}
</script>
<style lang='less' scope>
.pie-wrap{
width:100%;
height:400px;
}
</style>
3.使用echarts實現(xiàn)line圖
<template>
<!-- 為 ECharts 準(zhǔn)備一個具備大?。▽捀撸┑?DOM -->
<div id="chartLine" class="line-wrap"></div>
</template>
<script>
import * as echarts from 'echarts';
require('echarts/theme/shine');//引入主題
export default {
data() {
return {
chartLine: null
}
},
mounted() {
this.$nextTick(() => {
this.drawLineChart();
})
},
methods: {
drawLineChart() {
this.chartLine = echarts.init(this.$el,'shine');// 基于準(zhǔn)備好的dom，初始化echarts實例
let option = {
tooltip : {
trigger: 'axis'
},
legend: {
data:['郵件營銷','聯(lián)盟廣告','視頻廣告','直接訪問','搜索引擎']
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
axisTick: {
show: false
},
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value',
axisTick: {
show: false
},
name: '（人）'
}
],
series : [
{
name:'郵件營銷',
type:'line',
stack: '總量',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'聯(lián)盟廣告',
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]
}
]
};
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表
this.chartLine.setOption(option);
}
}
}
</script>
<style lang='less' scope>
.line-wrap{
width:50%;
height:400px;
}
</style>
4.echarts基礎(chǔ)概念
1）echarts實例
一個網(wǎng)頁中可以創(chuàng)建多個 echarts 實例，每個 echarts 實例 中可以創(chuàng)建多個圖表和坐標(biāo)系等等（用 option 來描述）。準(zhǔn)備一個 DOM 節(jié)點（作為 echarts 的渲染容器），就可以在上面創(chuàng)建一個 echarts 實例。
2）系列（series）
一組數(shù)值以及他們映射成的圖，一個 系列 包含的要素至少有：一組數(shù)值、圖表類型（series.type）、以及其他的關(guān)于這些數(shù)據(jù)如何映射成圖的參數(shù)。
echarts 里系列類型（series.type）就是圖表類型。系列類型（series.type）至少有：line（折線圖）、bar（柱狀圖）、pie（餅圖）
3）組件（component）
echarts 中至少有這些組件：xAxis（直角坐標(biāo)系 X 軸）、yAxis（直角坐標(biāo)系 Y 軸）、grid（直角坐標(biāo)系底板）、dataZoom（數(shù)據(jù)區(qū)縮放組件）、visualMap（視覺映射組件）、tooltip（提示框組件）、toolbox（工具欄組件）、series（系列）、...
5.echarts常用配置項和API
1）title標(biāo)題組件，包含主標(biāo)題和副標(biāo)題
title: {
text: 'Pie Chart',//主標(biāo)題文本
subtext: '純屬虛構(gòu)',//副標(biāo)題文本
x: 'center',
textStyle:{//主標(biāo)題樣式
color: "#333",
fontSize: 18
},
subtextStyle:{},//副標(biāo)題樣式
itemGap: 10,//主副標(biāo)題之間的間距
}
2）legend圖例組件
legend: {
left:"center",//圖例組件離容器左側(cè)的距離
top:"bottom",//圖例組件離容器上側(cè)的距離
orient:"horizontal",//圖例列表的布局朝向
itemGap :20,//圖例每項之間的間隔
formatter: function (name) {//用來格式化圖例文本，支持字符串模板和回調(diào)函數(shù)兩種形式~~~~
return 'Legend ' + name;
},
icon:'circle',//圖例項的 icon
data: [
{
icon: 'triangle',
textStyle: {
color: 'red'
},
name: '直接訪問'
},
'郵件營銷', '聯(lián)盟廣告', '視頻廣告', '搜索引擎'],//圖例的數(shù)據(jù)數(shù)組
}
3）xAxis直角坐標(biāo)系 grid 中的 x 軸
xAxis : [
{
type : 'category',//坐標(biāo)軸類型
boundaryGap : false,
axisTick: {//坐標(biāo)軸刻度相關(guān)設(shè)置
show: false
},
data : ['周一','周二','周三','周四','周五','周六','周日']//類目數(shù)據(jù)
}
]
4）yAxis直角坐標(biāo)系 grid 中的 y 軸
yAxis : [
{
type : 'value',//坐標(biāo)軸類型,`'value'` 數(shù)值軸，適用于連續(xù)數(shù)據(jù)
axisTick: {
show: false
},
name: '（人）'
}
]
5）tooltip提示框組件
tooltip : {
trigger: 'axis',//觸發(fā)類型,'axis'坐標(biāo)軸觸發(fā)，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用
formatter: "{a} <br/> : {c} (ublnpf9mb%)",//模板變量有 `{a}`, ``，`{c}`，`ublnpf9mb`，`{e}`，分別表示系列名，數(shù)據(jù)名，數(shù)據(jù)值等
}
6）series系列列表，每個系列通過 type 決定自己的圖表類型
A.series-line
series : [
{
name:'郵件營銷',
type:'line',
stack: '總量',
data:[120, 132, 101, 134, 90, 230, 210],//系列中的數(shù)據(jù)內(nèi)容數(shù)組
areaStyle:{//區(qū)域填充樣式
color:'red'
},
lineStyle:{//線條樣式
color:'#000'
},
emphasis:{//圖形的高亮樣式
label:{
color:'red'
}
}
}
]
B.series-pie
series : [
{
name: '訪問來源',
type: 'pie',
radius: ['50%', '70%'],//餅圖的半徑,數(shù)組的第一項是內(nèi)半徑，第二項是外半徑
center: ['50%', '50%'],//餅圖的中心（圓心）坐標(biāo)，數(shù)組的第一項是橫坐標(biāo)，第二項是縱坐標(biāo)。支持設(shè)置成百分比，設(shè)置成百分比時第一項是相對于容器寬度，第二項是相對于容器高度
roseType: false,//是否展示成南丁格爾圖，通過半徑區(qū)分?jǐn)?shù)據(jù)大小
data: [//系列中的數(shù)據(jù)內(nèi)容數(shù)組
{value: 335, name: '直接訪問'},
{value: 310, name: '郵件營銷'},
{value: 234, name: '聯(lián)盟廣告'},
{value: 135, name: '視頻廣告'},
{value: 1548, name: '搜索引擎'}
],
animationEasing: 'cubicInOut',//初始動畫的緩動效果
animationDuration: 2600,//初始動畫的時長
label: {
emphasis: mylabel//高亮的扇區(qū)和標(biāo)簽樣式
}
}
]
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
近日項目中需要使用信息提示框的功能,ui組件庫使用的是字節(jié)的arco-design-vue,看了一下,現(xiàn)有的Message不滿足要是需求,直接使用message組件的話,改樣式太麻煩,所以本文就本就介紹了基于Vue3+ts封裝一個簡單版的Message組件,需要的朋友可以參考下2023-09-09
這篇文章主要為大家介紹了vue插件及修改ip啟動端口的解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2022-04-04
Element實現(xiàn)表格嵌套、多個表格共用一個表頭的方法
這篇文章主要介紹了Element實現(xiàn)表格嵌套、多個表格共用一個表頭的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要介紹了vue遞歸組件實戰(zhàn)之簡單樹形控件的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了vue router 配置路由的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2021-10-10
這篇文章主要介紹了vue如何通過params和query傳值(刷新不丟失)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家介紹了vue3.x:報錯清單及解決記錄詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要介紹了詳解使用jest對vue項目進(jìn)行單元測試，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
詳解VUE Element-UI多級菜單動態(tài)渲染的組件
這篇文章主要介紹了VUE Element-UI多級菜單動態(tài)渲染的組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Antd的Table組件嵌套Table以及選擇框聯(lián)動操作
這篇文章主要介紹了Antd的Table組件嵌套Table以及選擇框聯(lián)動操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10