1.先安装 cnpm install echarts -S 然后在main.js中引入
import myChart from './utils/myChart'
Vue.use(myChart)
2.页面中使用
<div id="trendCalendar" style="height:600px;"></div>
3.新建myChart.js
import echarts from 'echarts';
const install = function (Vue) {
Object.defineProperties(Vue.prototype, {
$chart: {
get() {
return {
//用户转化漏斗
ChangeFunnel: (id) => {
this.chart = echarts.init(document.getElementById(id));
this.chart.clear();
let option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
series: [
{
name: '预期',
type: 'funnel',
left: '2%',
width: '75%',
label: {
formatter: '{b}预期'
},
labelLine: {
show: false
},
itemStyle: {
opacity: 0.7
},
emphasis: {
label: {
position: 'inside',
formatter: '{b}预期: {c}%'
}
},
data: [
{value: 60, name: '目标用户量'},
{value: 40, name: '公众号关注量'},
{value: 20, name: '特通单申请量'},
{value: 80, name: '特通单通过量'},
{value: 90, name: '特通单量'},
{value: 95, name: '导流单量'},
{value: 98, name: '转化单量预期'},
]
},
{
name: '实际',
type: 'funnel',
left: '2%',
width: '75%',
maxSize: '80%',
label: {
position: 'inside',
formatter: '{c}%',
color: '#fff'
},
itemStyle: {
opacity: 0.5,
borderColor: '#fff',
borderWidth: 2
},
emphasis: {
label: {
position: 'inside',
formatter: '{b}实际: {c}%'
}
},
data: [
{value: 60, name: '目标用户量'},
{value: 40, name: '公众号关注量'},
{value: 20, name: '特通单申请量'},
{value: 80, name: '特通单通过量'},
{value: 30, name: '特通单量'},
{value: 13, name: '导流单量'},
{value: 32, name: '转化单量预期'},
]
}
]
};
this.chart.setOption(option)
},
//饼图----用户转化趋势
TrendCalendar: (id) => {
this.chart = echarts.init(document.getElementById(id));
this.chart.clear();
let cellSize = [80, 80];
let pieRadius = 30;
function getVirtulData() {
let date = +echarts.number.parseDate('2020-08-01');
let end = +echarts.number.parseDate('2020-09-01');
let dayTime = 3600 * 24 * 1000;
let data = [];
for (let time = date; time < end; time += dayTime) {
data.push([ echarts.format.formatTime('yyyy-MM-dd', time), Math.floor(Math.random() * 10000) ]);
}
return data;
}
function getPieSeries(scatterData, chart) {
return echarts.util.map(scatterData, function (item, index) {
let center = chart.convertToPixel('calendar', item);
return {
id: index + 'pie',
type: 'pie',
center: center,
label: {
normal: {
formatter: '{c}',
position: 'inside'
}
},
radius: pieRadius,
data: [
{name: '新用户', value: Math.round(Math.random() * 24)},
{name: '特通单', value: Math.round(Math.random() * 24)},
{name: '导流单', value: Math.round(Math.random() * 24)},
{name: '转化单', value: Math.round(Math.random() * 24)}
]
};
});
}
function getPieSeriesUpdate(scatterData, chart) {
return echarts.util.map(scatterData, function (item, index) {
let center = chart.convertToPixel('calendar', item);
return {
id: index + 'pie',
center: center
};
});
}
let scatterData = getVirtulData();
let option = {
tooltip: {},
// legend: {
// data: ['工作', '娱乐', '睡觉'],
// bottom: 20
// },
calendar: {
top: 'middle',
left: 'center',
orient: 'vertical',
cellSize: cellSize,
yearLabel: {
show: false,
textStyle: {
fontSize: 30
}
},
dayLabel: {
margin: 20,
firstDay: 1,
nameMap: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
},
monthLabel: {
show: false
},
range: ['2020-08']
},
series: [{
id: 'label',
type: 'scatter',
coordinateSystem: 'calendar',
symbolSize: 1,
label: {
normal: {
show: true,
formatter: function (params) {
return echarts.format.formatTime('dd', params.value[0]);
},
offset: [-cellSize[0] / 2 + 10, -cellSize[1] / 2 + 10],
textStyle: {
color: '#000',
fontSize: 14
}
}
},
data: scatterData
}]
};
let pieInitialized;
let myChart = this.chart;
setTimeout(function () {
pieInitialized = true;
myChart.setOption({
series: getPieSeries(scatterData, myChart)
});
}, 10);
app.onresize = function () {
if (pieInitialized) {
myChart.setOption({
series: getPieSeriesUpdate(scatterData, myChart)
});
}
};
this.chart.setOption(option)
},
//线图----用户转化趋势
TrendShare: (id) => {
this.chart = echarts.init(document.getElementById(id));
this.chart.clear();
let myChart = this.chart;
setTimeout(function () {
let option = {
legend: {},
tooltip: {
trigger: 'axis',
showContent: false
},
dataset: {
source: [
['product', '2012', '2013', '2014', '2015', '2016', '2017'],
['新用户', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
['特通单', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
['导流单', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
['转化单', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
]
},
xAxis: {type: 'category'},
yAxis: {gridIndex: 0},
grid: {top: '55%'},
series: [
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{
type: 'pie',
id: 'pie',
radius: '30%',
center: ['50%', '25%'],
label: {
formatter: '{b}: {@2012} ({d}%)'
},
encode: {
itemName: 'product',
value: '2012',
tooltip: '2012'
}
}
]
};
myChart.on('updateAxisPointer', function (event) {
let xAxisInfo = event.axesInfo[0];
if (xAxisInfo) {
let dimension = xAxisInfo.value + 1;
myChart.setOption({
series: {
id: 'pie',
label: {
formatter: '{b}: {@[' + dimension + ']} ({d}%)'
},
encode: {
value: dimension,
tooltip: dimension
}
}
});
}
});
myChart.setOption(option)
});
},
}
}
}
})
}
export default {
install
};
