Vue2+ECharts二次封装绘图组件
1：如何封装组件
见案例（组件函数）《testTs》
<template>
<div id="test">
<div v-for="(item,index) in items" :key="index" @click="btn(index)">
{
{
item.label}}
</div>
</div>
</template>
<script>
export default {
props:{
selectId:{
type:[Number,String],
default:1
},
items: {
typez:Array,
default(){
return []}
}
},
methods:{
btn(index){
this.$emit('change',index)
}
}
}
</script>
<style scoped>
#test {
display: flex;
}
#test > div{
padding: 20px;
}
</style>
调用组件函数
<template>
<div>
<test-ts
:selectId="selectId"
:items="items"
@change="handerChange">
</test-ts>
</div>
</template>
<script>
import testTs from '@/components/test/testTs.vue'
export default {
components:{
testTs
},
data() {
return {
selectId:1,
items:[{
label:"la"},{
label:"lb"},{
label:"lc"},{
label:"ld"},{
label:"le"}],
};
},
mounted() {
},
methods: {
handerChange(e){
console.log(1,e)
if(e == 1){
this.items = [{
label:"lb"},label:"lc"},{
label:"ld"},{
label:"le"}]
}
}
},
}
</script>
效果如图
当点到lb，也就是index为1的元素，la就会消失
2：ECharts绘制图形（三维柱状图）
实例
<template>
<div ref="mychart" id="mychart"></div>
</template>
<script>
// 1:引用echarts
import * as echarts from 'echarts'
export default {
data(){
return {
echartsData:{
xList: ['2012', '2013', '2014', '2015', '2016'],
yList: {
'Forest': [320, 332, 301, 334, 390],
'Steppe': [220, 182, 191, 234, 290],
'Desert': [150, 232, 201, 154, 190]
}
}
}
},
mounted(){
this.initEcarts()
},
methods:{
initEcarts(){
let titleList = []
for (var key in this.echartsData.yList) {
titleList.push(key)
}
var app = {
};
var chartDom = document.getElementById('mychart');
var myChart = echarts.init(chartDom);
var option;
const posList = [
'left',
'right',
'top',
'bottom',
'inside',
'insideTop',
'insideLeft',
'insideRight',
'insideBottom',
'insideTopLeft',
'insideTopRight',
'insideBottomLeft',
'insideBottomRight'
];
app.configParameters = {
align: {
options: {
left: 'left',
center: 'center',
right: 'right'
}
},
verticalAlign: {
options: {
top: 'top',
middle: 'middle',
bottom: 'bottom'
}
},
position: {
options: posList.reduce(function (map, pos) {
map[pos] = pos;
return map;
}, {
})
},
distance: {
min: 0,
max: 100
}
};
app.config = {
rotate: 90,
align: 'left',
verticalAlign: 'middle',
position: 'insideBottom',
distance: 15,
onChange: function () {
const labelOption = {
rotate: app.config.rotate,
align: app.config.align,
verticalAlign: app.config.verticalAlign,
position: app.config.position,
distance: app.config.distance
};
myChart.setOption({
series: [
{
label: labelOption
},
{
label: labelOption
},
{
label: labelOption
},
{
label: labelOption
}
]
});
}
};
const labelOption = {
show: false,
position: app.config.position,
distance: app.config.distance,
align: app.config.align,
verticalAlign: app.config.verticalAlign,
rotate: app.config.rotate,
formatter: '{c} {name|{a}}',
fontSize: 16,
rich: {
name: {
}
}
};
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: titleList
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: {
show: true },
// dataView: { show: true, readOnly: false },
magicType: {
show: true, type: ['line', 'bar', 'stack'] },
// restore: { show: true },
saveAsImage: {
show: true }
}
},
xAxis: [
{
type: 'category',
axisTick: {
show: false },
data: this.echartsData.xList
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: titleList[0],
type: 'bar',
barGap: 0,
label: labelOption,
emphasis: {
focus: 'series'
},
data: this.echartsData.yList[titleList[0]]
},
{
name: titleList[1],
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series'
},
data: this.echartsData.yList[titleList[1]]
},
{
name: titleList[2],
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series'
},
data: this.echartsData.yList[titleList[2]]
}
]
};
option && myChart.setOption(option);
}
}
}
</script>
<style>
#mychart{
width: 100%;
height: 500px;
border: 0px solid red;
}
</style>
修改只需要修改xList和yList的值即可
3：ECharts绘制饼状图
<template>
<!-- ECharts默认宽高是0，如果不设置页面是不显示的-->
<div ref="mychart" id="mychart" ></div>
</template>
<script>
// 1:引用echarts
import * as echarts from 'echarts'
export default {
data(){
return {
echartsData:{
yData:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8'],
xData:[
{
value: 300, name: 'rose1' },
{
value: 28, name: 'rose2' },
{
value: 26, name: 'rose3' },
{
value: 24, name: 'rose4' },
{
value: 22, name: 'rose5' },
{
value: 20, name: 'rose6' },
{
value: 18, name: 'rose7' },
{
value: 16, name: 'rose8' }
]
}
}
},
mounted(){
this.initEcarts()
},
methods:{
initEcarts(){
var chartDom = document.getElementById('mychart');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: 'Nightingale Chart',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
left: 'center',
top: 'bottom',
data: this.echartsData.yData
},
toolbox: {
show: true,
feature: {
mark: {
show: true },
// dataView: { show: true, readOnly: false },
// restore: { show: true },
saveAsImage: {
show: true }
}
},
series: [{
name: 'Radius Mode',
type: 'pie',
radius: [20, 140],
center: ['75%', '50%'],
roseType: 'radius',
itemStyle: {
borderRadius: 5
},
data: this.echartsData.xData
}]
};
option && myChart.setOption(option);
}
}
}
</script>
<style>
#mychart{
width: 100%;
height: 500px;
border: 0px solid red;
}
</style>
修改只需要修改xList和yList的值即可
4：封装饼状图组件并调用
饼状图组件
<template>
<div ref="mychart" id="mychart"></div>
</template>
<script>
// 1:引用echarts
import * as echarts from 'echarts'
export default {
data(){
return {
option: null,
myChart: null
}
},
props:{
xData: {
typez:Array,
default(){
return []}
},
yData: {
typez:Array,
default(){
return []}
}
},
mounted(){
this.initEcarts()
},
methods:{
initEcarts(){
var chartDom = document.getElementById('mychart');
this.myChart = echarts.init(chartDom);
this.option = {
title: {
text: 'Nightingale Chart',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
left: 'center',
top: 'bottom',
data: this.yData
},
toolbox: {
show: true,
feature: {
mark: {
show: true },
saveAsImage: {
show: true }
}
},
series: [{
name: 'Radius Mode',
type: 'pie',
radius: [20, 140],
center: ['75%', '50%'],
roseType: 'radius',
itemStyle: {
borderRadius: 5
},
data: this.xData
}]
};
this.option && this.myChart.setOption(this.option,true);
},
ChangeData(){
this.option.legend.data = this.yData
this.option.series[0].data = this.xData
// 使用刚指定的配置项和数据显示图表。
this.option && this.myChart.setOption(this.option,true);
}
},
watch: {
// 监听到数据然后赋值
xData(oldval, newval) {
console.log(oldval,newval)
this.ChangeData()
},
yData(oldval, newval) {
console.log(oldval,newval)
this.ChangeData()
},
deep: true
}
}
</script>
<style>
#mychart{
width: 100%;
height: 100%;
}
</style>
调用饼状图组件
<template>
<!-- ECharts默认宽高是0，如果不设置页面是不显示的-->
<div id="pieOne">
<pie-one
:xData="xData"
:yData="yData">
</pie-one>
<a @click="add">lalalal</a>
</div>
</template>
<script>
// 1:引用echarts
import pieOne from '@/components/ECharts/pie-one.vue'
export default {
components:{
pieOne
},
data(){
return {
yData:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8'],
xData:[
{
value: 300, name: 'rose1' },
{
value: 28, name: 'rose2' },
{
value: 26, name: 'rose3' },
{
value: 24, name: 'rose4' },
{
value: 22, name: 'rose5' },
{
value: 20, name: 'rose6' },
{
value: 18, name: 'rose7' },
{
value: 16, name: 'rose8' }
]
}
},
methods:{
add(){
this.yData = ['rose1','rose2','rose3','rose4','rose5','rose6','rose7']
this.xData = [
{
value: 30, name: 'rose1' },
{
value: 28, name: 'rose2' },
{
value: 26, name: 'rose3' },
{
value: 24, name: 'rose4' },
{
value: 22, name: 'rose5' },
{
value: 20, name: 'rose6' },
{
value: 18, name: 'rose7' }
]
}
}
}
</script>
<style>
#pieOne{
height: 350px;
width: 100%;
}
</style>
5：绘制柱状图组件并调用
柱状图组件
<template>
<!-- ECharts默认宽高是0，如果不设置页面是不显示的-->
<div ref="mychart" id="mychart" ></div>
</template>
<script>
// 1:引用echarts
import * as echarts from 'echarts'
export default {
data(){
return {
myChart:null,
option:null
}
},
props:{
xList: {
typez:Array,
default(){return []}
},
yList: {
typez:Object,
default(){return {}}
}
},
mounted(){
this.initEcarts()
},
methods:{
initEcarts(){
let titleList = []
for (var key in this.yList) {
titleList.push(key)
}
var app = {};
var chartDom = document.getElementById('mychart');
this.myChart = echarts.init(chartDom);
const posList = [
'left',
'right',
'top',
'bottom',
'inside',
'insideTop',
'insideLeft',
'insideRight',
'insideBottom',
'insideTopLeft',
'insideTopRight',
'insideBottomLeft',
'insideBottomRight'
];
app.configParameters = {
align: {
options: {
left: 'left',
center: 'center',
right: 'right'
}
},
verticalAlign: {
options: {
top: 'top',
middle: 'middle',
bottom: 'bottom'
}
},
position: {
options: posList.reduce(function (map, pos) {
map[pos] = pos;
return map;
}, {})
},
distance: {
min: 0,
max: 100
}
};
app.config = {
rotate: 90,
align: 'left',
verticalAlign: 'middle',
position: 'insideBottom',
distance: 15,
onChange: function () {
const labelOption = {
rotate: app.config.rotate,
align: app.config.align,
verticalAlign: app.config.verticalAlign,
position: app.config.position,
distance: app.config.distance
};
this.myChart.setOption({
series: [
{
label: labelOption
},
{
label: labelOption
},
{
label: labelOption
},
{
label: labelOption
}
]
});
}
};
const labelOption = {
show: false,
position: app.config.position,
distance: app.config.distance,
align: app.config.align,
verticalAlign: app.config.verticalAlign,
rotate: app.config.rotate,
formatter: '{c} {name|{a}}',
fontSize: 16,
rich: {
name: {}
}
};
this.option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: titleList
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: { show: true },
// dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar', 'stack'] },
// restore: { show: true },
saveAsImage: { show: true }
}
},
xAxis: [
{
type: 'category',
axisTick: { show: false },
data: this.xList
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: titleList[0],
type: 'bar',
barGap: 0,
label: labelOption,
emphasis: {
focus: 'series'
},
data: this.yList[titleList[0]]
},
{
name: titleList[1],
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series'
},
data: this.yList[titleList[1]]
},
{
name: titleList[2],
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series'
},
data: this.yList[titleList[2]]
}
]
};
this.option && this.myChart.setOption(this.option);
},
ChangeData(){
let titleList = []
for (var key in this.yList) {
titleList.push(key)
}
this.option.xAxis[0].data = this.xList
this.option.series[0].data = this.yList[titleList[0]]
this.option.series[1].data = this.yList[titleList[1]]
this.option.series[2].data = this.yList[titleList[2]]
this.option && this.myChart.setOption(this.option);
}
},
watch: { // 监听到数据然后赋值
xList(oldval, newval) {
this.ChangeData()
},
yList(oldval, newval) {
this.ChangeData()
},
deep: true
}
}
</script>
<style>
#mychart{
width: 100%;
height: 100%;
background-color: aliceblue;
}
</style>
调用测试案例
<template>
<!-- ECharts默认宽高是0，如果不设置页面是不显示的-->
<div id="barMany">
<bar-many
:xList="xList"
:yList="yList">
</bar-many>
<a @click="add"><h1>lalalalsaa</h1></a>
</div>
</template>
<script>
import barMany from '@/components/ECharts/bar-many.vue'
export default {
data(){
return {
xList: ['2012', '2013', '2014', '2015', '2016'],
yList: {
'Forest': [300, 332, 301, 334, 390],
'Steppe': [220, 182, 191, 234, 290],
'Desert': [150, 232, 201, 154, 190]
}
}
},
components:{
barMany
},
methods:{
add(){
this.yList = {
'Forest': [100, 100, 100, 50, 100],
'Steppe': [220, 182, 191, 234, 290],
'Desert': [150, 232, 201, 154, 190]
}
this.xList = ['2012', '2013', '2014', '2015', '2016']
}
}
}
</script>
<style>
#barMany{
width: 100%;
height: 350px;
}
</style>
ponents/ECharts/bar-many.vue’
export default {
data(){
return {
xList: [‘2012’, ‘2013’, ‘2014’, ‘2015’, ‘2016’],
yList: {
‘Forest’: [300, 332, 301, 334, 390],
‘Steppe’: [220, 182, 191, 234, 290],
‘Desert’: [150, 232, 201, 154, 190]
}
}
},
components:{
barMany
},
methods:{
add(){
this.yList = {
‘Forest’: [100, 100, 100, 50, 100],
‘Steppe’: [220, 182, 191, 234, 290],
‘Desert’: [150, 232, 201, 154, 190]
}
this.xList = [‘2012’, ‘2013’, ‘2014’, ‘2015’, ‘2016’]
}
}
}