<template>
<div class="Mymodule">
<div class="midWrap" id="lines" style="width: 536px; height: 256px"></div>
</div>
</template>
<script>
let echarts = require('echarts/lib/echarts');
// 引入折线图和饼图组件
require('echarts/lib/chart/line');
require('echarts/lib/chart/pie');
// 引入提示框和title等组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/legend');
require('echarts/lib/component/grid');
require('echarts/lib/component/title');
export default {
name: 'Myfooter',
data() {
return {
//x轴的数据
datax: ['周一', '周二', '周三', '周四', '周五'],
// 给折线图渲染的数据
sources: [
['合', 5, 6, 7, 8, 9],
['宽', 9, 4, 6, 8, 7],
['其', 3, 3, 5, 7, 9],
['视', 8, 4, 6, 7, 9],
['流', 2, 9, 3, 6, 7],
],
// 饼图的数据
datapie: [
{ value: 35, name: '合' },
{ value: 34, name: '宽' },
{ value: 27, name: '其' },
{ value: 34, name: '视' },
{ value: 27, name: '流' },
],
// 图例名称
dataLegend: ['合', '宽', '其', '视', '流'],
};
},
computed: {},
mounted() {
this.drawLine();
// this.getCurrentTime();
},
methods: {
drawLine() {
// 基于准备好的dom,初始化echarts实例
let da = this.datapie;
let sou = this.sources;
let datax = this.datax;
let myChart = echarts.init(document.getElementById('lines'));
// 绘制图表
myChart.setOption({
tooltip: {
trigger: 'axis',
// showContent: true
},
dataset: {
source: this.sources,
},
title: [
{
subtext: '量\n占比', //副标题
left: '15%',
top: '36%',
textAlign: 'center',
subtextStyle: {
fontSize: 12,
color: 'rgba(0,0,0,.65)',
},
},
],
// 饼图的图例
legend: {
itemWidth: 8,//图例的图标直径,圆点的直径大小
itemGap: 20,
icon: 'circle',
top: 'bottom',
bottom: 0,
left: 'left',
padding: [0, 20],
textStyle: {
color: 'rgba(0,0,0,.65)',
},
//图例的格式化
formatter: name => {
// 计算总量
let p1, p2;
function countTotal(arr, keyName) {
let $total = 0;
$total = arr.reduce(function(
total,
currentValue,
currentIndex,
arr,
) {
return currentValue[keyName]
? total * 1 + currentValue[keyName] * 1 //转换为number类型
: total * 1;
},
0);
return $total;
}
let total = countTotal(da, 'value');
for (let i in da) {
if (da[i]['name'] == name) {
let da1 = da[i]['value'];
// 百分比小数
let da2 = ((da1 / total) * 100).toFixed(2);
p1 = da2 + '%';
p2 = da[i]['value'];
}
}
return name + '\t' + p2 + '\t ' + p1;
// return name
},
data: this.dataLegend,
},
grid: {
top: '6%',
left: '32%',
right: '3%',
bottom: '26%',
containLabel: true,
},
xAxis: [
{
type: 'category',
boundaryGap: false, //默认值为true,false时标尺在中间
data: datax,
axisLine: {
lineStyle: {
color: 'rgba(0,0,0,.3)',
},
},
axisTick: {
alignWithLabel: true, //使刻度与折线点对齐
},
// x轴网格线
splitLine: {
show: true,
lineStyle: {
color: 'rgba(0,0,0,.1)',
},
},
},
],
yAxis: [
{
type: 'value',
min: 0,
axisLine: {
lineStyle: {
color: 'rgba(0,0,0,.3)',
},
},
axisTick: {
length: 0, //刻度线长度
},
},
],
series: [
{
name: '合',
type: 'line',
id: 'line',
data: [], //初始化折线图
symbol: 'circle', //使点变实心,symbol符合、标志;circle圆形
symbolSize: 8,
// 折线图提示框
tooltip: {
trigger: 'item',
formatter: '{b}<br />{a}量 {c}',
backgroundColor: '#fff',
borderColor: 'rgba(0,0,0,.45)',
color: 'rgba(0,0,0,.45)',
borderWidth: 0,
padding: [6, 12],
textStyle: {
color: 'rgba(0,0,0,.65)',
fontSize: 12,
align: 'left',
lineHeight: 20,
},
extraCssText: 'box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.2);',
},
encode: {
x: [0],
},
},
// pie图
{
type: 'pie',
hoverOffset: 5,
hoverAnimation: true, //开启放大效果
radius: ['45%', '63%'], //radius半径
center: ['16%', '48%'],
top: 22,
bottom: 40,
data: this.datapie,
selectedOffset: 4, //选中时偏移的距离
selectedMode: 'single', //单选,点击向外偏移
tooltip: {
trigger: 'item',
formatter: '{b}占比:{d}%',
backgroundColor: 'rgba(255,255,255,.8)',
borderColor: 'rgba(0,0,0,.45)',
color: 'rgba(0,0,0,.45)',
borderWidth: 0,
padding: 6,
textStyle: {
color: 'rgba(0,0,0,.65)',
fontSize: 12,
},
extraCssText: 'box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.2);',
},
itemStyle: {
normal: {
borderColor: '#fff',
borderWidth: 0.6,
label: {
show: false,
// formatter: '{b}: {d}%',
},
labelLine: {
show: false,
smooth: 0.2,
length: 0,
length2: 16,
},
},
},
// 是否显示标签label
emphasis: {
label: {
show: false,
},
},
},
],
});
myChart.on('click', function(e) {
var a1 = e.name;
for (let i in sou) {
var sou1 = sou[i];
for (let j in sou1) {
// console.log(sou1);
var sou2 = sou1[0];
if (a1 == sou2) {
//获取除第一项以外的其余项
var dimension = sou1.slice(1);
// console.log(dimension);
myChart.setOption({
series: {
type: 'line',
label: {
formatter: '{b}: ({d}%)',
},
data: dimension,
name: sou1[0],
tooltip: {
formatter: function(e) {
var na = e.seriesName;
return e.name + '<br/>' + na + '量 ' + e.value;
},
},
},
});
}
}
}
});
},
},
};
</script>
<style>
</style>
2.效果图