vue饼图组件_vue中使用ECharts实现折线图和饼图

在开发后台管理项目时，需要统计后台用户数据，以折线图和饼图的形式显示，这边采用apache-echarts来实现需求。

1.安装echarts和引入

npm install echarts --save

import * as echarts from 'echarts';

2.使用echarts实现pie图

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}
{b} : {c} ({d}%)",

},

legend: {

data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],

left:"center",

top:"bottom",

orient:"horizontal",

},

series: [

{

name: '访问来源',

type: 'pie',

radius: ['50%', '70