vue使用ECharts實現折線圖和餅圖
在開發後臺管理項目時,需要統計後臺用戶數據,以折線圖和餅圖的形式顯示,這邊采用apache-echarts來實現需求。
1.安裝echarts和引入
npm install echarts --save import * as echarts from 'echarts';
2.使用echarts實現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: '{b} : {c} ({d}%)', textStyle: mytextStyle }; this.chartPie = echarts.init(document.getElementById('chartPie'),'macarons'); this.chartPie.setOption({ title: { text: 'Pie Chart', subtext: '純屬虛構', x: 'center' }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)", }, legend: { data: ['直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎'], 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: '聯盟廣告'}, {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實現line圖
<template> <!-- 為 ECharts 準備一個具備大小(寬高)的 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');// 基於準備好的dom,初始化echarts實例 let option = { tooltip : { trigger: 'axis' }, legend: { data:['郵件營銷','聯盟廣告','視頻廣告','直接訪問','搜索引擎'] }, 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:'聯盟廣告', 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] } ] }; // 使用剛指定的配置項和數據顯示圖表 this.chartLine.setOption(option); } } } </script> <style lang='less' scope> .line-wrap{ width:50%; height:400px; } </style>
4.echarts基礎概念
1)echarts實例
一個網頁中可以創建多個 echarts 實例,每個 echarts 實例 中可以創建多個圖表和坐標系等等(用 option 來描述)。準備一個 DOM 節點(作為 echarts 的渲染容器),就可以在上面創建一個 echarts 實例。
2)系列(series)
一組數值以及他們映射成的圖,一個 系列 包含的要素至少有:一組數值、圖表類型(series.type)、以及其他的關於這些數據如何映射成圖的參數。
echarts 裡系列類型(series.type)就是圖表類型。系列類型(series.type)至少有:line(折線圖)、bar(柱狀圖)、pie(餅圖)
3)組件(component)
echarts 中至少有這些組件:xAxis(直角坐標系 X 軸)、yAxis(直角坐標系 Y 軸)、grid(直角坐標系底板)、dataZoom(數據區縮放組件)、visualMap(視覺映射組件)、tooltip(提示框組件)、toolbox(工具欄組件)、series(系列)、…
5.echarts常用配置項和API
1)title標題組件,包含主標題和副標題
title: { text: 'Pie Chart',//主標題文本 subtext: '純屬虛構',//副標題文本 x: 'center', textStyle:{//主標題樣式 color: "#333", fontSize: 18 }, subtextStyle:{},//副標題樣式 itemGap: 10,//主副標題之間的間距 }
2)legend圖例組件
legend: { left:"center",//圖例組件離容器左側的距離 top:"bottom",//圖例組件離容器上側的距離 orient:"horizontal",//圖例列表的佈局朝向 itemGap :20,//圖例每項之間的間隔 formatter: function (name) {//用來格式化圖例文本,支持字符串模板和回調函數兩種形式~~~~ return 'Legend ' + name; }, icon:'circle',//圖例項的 icon data: [ { icon: 'triangle', textStyle: { color: 'red' }, name: '直接訪問' }, '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎'],//圖例的數據數組 }
3)xAxis直角坐標系 grid 中的 x 軸
xAxis : [ { type : 'category',//坐標軸類型 boundaryGap : false, axisTick: {//坐標軸刻度相關設置 show: false }, data : ['周一','周二','周三','周四','周五','周六','周日']//類目數據 } ]
4)yAxis直角坐標系 grid 中的 y 軸
yAxis : [ { type : 'value',//坐標軸類型,`'value'` 數值軸,適用於連續數據 axisTick: { show: false }, name: '(人)' } ]
5)tooltip提示框組件
tooltip : { trigger: 'axis',//觸發類型,'axis'坐標軸觸發,主要在柱狀圖,折線圖等會使用類目軸的圖表中使用 formatter: "{a} <br/>{b} : {c} ({d}%)",//模板變量有 `{a}`, `{b}`,`{c}`,`{d}`,`{e}`,分別表示系列名,數據名,數據值等 }
6)series系列列表,每個系列通過 type 決定自己的圖表類型
A.series-line series : [ { name:'郵件營銷', type:'line', stack: '總量', data:[120, 132, 101, 134, 90, 230, 210],//系列中的數據內容數組 areaStyle:{//區域填充樣式 color:'red' }, lineStyle:{//線條樣式 color:'#000' }, emphasis:{//圖形的高亮樣式 label:{ color:'red' } } } ] B.series-pie series : [ { name: '訪問來源', type: 'pie', radius: ['50%', '70%'],//餅圖的半徑,數組的第一項是內半徑,第二項是外半徑 center: ['50%', '50%'],//餅圖的中心(圓心)坐標,數組的第一項是橫坐標,第二項是縱坐標。支持設置成百分比,設置成百分比時第一項是相對於容器寬度,第二項是相對於容器高度 roseType: false,//是否展示成南丁格爾圖,通過半徑區分數據大小 data: [//系列中的數據內容數組 {value: 335, name: '直接訪問'}, {value: 310, name: '郵件營銷'}, {value: 234, name: '聯盟廣告'}, {value: 135, name: '視頻廣告'}, {value: 1548, name: '搜索引擎'} ], animationEasing: 'cubicInOut',//初始動畫的緩動效果 animationDuration: 2600,//初始動畫的時長 label: { emphasis: mylabel//高亮的扇區和標簽樣式 } } ]
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- vue-echarts如何實現圖表組件封裝詳解
- Vue導入Echarts實現折線散點圖
- echarts安裝與配置
- Echarts直角坐標系x軸y軸屬性設置整理大全
- JavaScript可視化與Echarts詳細介紹