vue引入echart
main.js要引入echarts.js
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],
}
}
}
