vue引入echart

src>components  文件夹下创建Charts 文件夹   

里面添加echart组件    例如barChart.vue

<template>
<div class="Chart" ref="Chart"></div>

</template>

<script>
import echarts from ‘echarts‘;
let option = {

tooltip: {
trigger: ‘axis‘,
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: ‘shadow‘ // 默认为直线，可选为：‘line‘ | ‘shadow‘
}
},
legend: {
show:false
},
grid: {
top:‘16%‘,
left: ‘10%‘,
right: ‘10%‘,
bottom: ‘20%‘,

},
xAxis: {
type: ‘category‘,
data: [],
axisLine:{//X坐标轴颜色
lineStyle:{
color:‘#2f415b‘
}
},
axisTick:{//x坐标轴刻度显示不显示
show:true,
//alignWithLabel:true//刻度线在正中间
},
axisLabel:{//X坐标轴刻度标签相关设置
interval:0,
textStyle:{
fontSize:12,
color:‘#93a8bf‘
},

},
splitLine:{
show:false,
},

},
yAxis: {
type: ‘value‘,
axisLine:{//X坐标轴颜色
lineStyle:{
color:‘#2f415b‘
}
},
axisTick:{//x坐标轴刻度显示不显示
show:true,
//alignWithLabel:true//刻度线在正中间
},
axisLabel:{//X坐标轴刻度标签相关设置
interval:0,
textStyle:{
fontSize:12,
color:‘#93a8bf‘
},

},
splitLine:{
show:true,
lineStyle:{
color:‘#073f66‘,
type:‘dashed‘
}
},
},
series: [
{
name:‘销售量‘,
type: ‘bar‘,
label:{
show:true,
position:‘top‘
},
// itemStyle:{
// color: new echarts.graphic.LinearGradient(
// 0, 0, 0, 1,
// [
// {offset: 0, color: ‘#f00‘}, //柱图渐变色
// {offset: 0.5, color: ‘#80101c‘}, //柱图渐变色
// {offset: 1, color: ‘#0d1d32‘}, //柱图渐变色
// ]
// )
// },

barWidth:20,
data: [],

}

]
};

export default {
name: ‘Chart‘,
props: {
fullOptions: {
type: Object,
default: ()=>{ return {}; }
},
everyAnimation: {
type: Boolean,
default: true
},

hotxAxisData:{
type: Array,
default: () =>  [‘1月‘, ‘2月‘, ‘3月‘, ‘4月‘, ‘5月‘, ‘6月‘]
},
hotseriesData:{
type: Array,
default: () => [0, 0, 0, 0, 0, 0]
},


},
data(){
return{
chart:‘‘
}
},
mounted(){
this.initChart();
},
methods: {
initChart(){
this.chart = echarts.init(this.$refs.Chart);
this.chart.setOption(this.getFormatedOption());

window.onresize = () => {
this.chart.resize()
}

},

getFormatedOption(){
if(Object.keys(this.fullOptions).length && this.fullOptions[‘series‘] && this.fullOptions[‘series‘].length) return this.fullOptions;

let cloneOption = JSON.parse(JSON.stringify(option));
cloneOption.xAxis.data = this.hotxAxisData
cloneOption.series[0].data = this.hotseriesData
return cloneOption;

},
renderChart(){
if(this.everyAnimation) this.chart.clear();
this.chart.setOption(this.getFormatedOption());
}




},
watch:{

hotxAxisData(){
this.renderChart();
},
hotseriesData(){
this.renderChart();
},

}

}
</script>

<style lang="scss" scoped>
.Chart {
height: 100%;
}
</style>

需要引用的home页面操作如下

<template>

<div>　　

<barChart
:hotxAxisData="hotxAxisData"
:hotseriesData="hotseriesData">
</barChart>

</div>

</template>

import barChart from ‘@/components/Charts/barChart.vue‘

export default {

name: ‘Home‘,

components: {
barChart,
},

data(){

　　return{

　　hotxAxisData: [‘1月‘, ‘2月‘, ‘3月‘, ‘4月‘, ‘5月‘, ‘6月‘],
　　hotseriesData: [40, 30, 20, 10, 8, 6],

　　}

}

}

vue引入echart

原文：https://www.cnblogs.com/shez/p/13209061.html