参考链接:https://blog.csdn.net/guozhangqiang/article/details/82379306
1 首先进行全局安装:
npm install echarts -S (权限不够可以加上sudo)
2 引入,一般使用表格都是多个图,你可以新建一个目录,我这里建目录charts保存图表组件
新建Chart.vue:
<template>
<div :id="id" :class="className" :style="{height:height,width:width}" />
// 定义了模板
</template>
<script>
import echarts from 'echarts'
export default {
props: {
className: {
type: String,
default: 'chart' //模板名称
},
id: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '200px'
},
height: {
type: String,
default: '200px'
}
},
data() {
return {
chart: null
}
},
mounted() {
this.initChart()
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById(this.id))
const xAxisData = []
const data = []
const data2 = []
for (let i = 0; i < 50; i++) {
xAxisData.push(i)
data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
}
this.chart.setOption({
backgroundColor: '#08263a',
grid: {
left: '5%',
right: '5%'
},
xAxis: [{
show: false,
data: xAxisData
}, {
show: false,
data: xAxisData
}],
visualMap: {
show: false,
min: 0,
max: 50,
dimension: 0,
inRange: {
color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
}
},
yAxis: {
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#4a657a'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#08263f'
}
},
axisTick: {
show: false
}
},
series: [{
name: 'back',
type: 'bar',
data: data2,
z: 1,
itemStyle: {
normal: {
opacity: 0.4,
barBorderRadius: 5,
shadowBlur: 3,
shadowColor: '#111'
}
}
}, {
name: 'Simulate Shadow',
type: 'line',
data,
z: 2,
showSymbol: false,
animationDelay: 0,
animationEasing: 'linear',
animationDuration: 1200,
lineStyle: {
normal: {
color: 'transparent'
}
},
areaStyle: {
normal: {
color: '#08263a',
shadowBlur: 50,
shadowColor: '#000'
}
}
}, {
name: 'front',
type: 'bar',
data,
xAxisIndex: 1,
z: 3,
itemStyle: {
normal: {
barBorderRadius: 5
}
}
}],
animationEasing: 'elasticOut',
animationEasingUpdate: 'elasticOut',
animationDelay(idx) {
return idx * 20
},
animationDelayUpdate(idx) {
return idx * 20
}
})
}
}
}
</script>
建好组件之后,我在HelloWorld.vue中引用:
<template>
<div class="chart-container">
<chart height="100%" width="100%" /> //组件实例化,可以根据之前定义的给定样式参数
</div>
</template>
<script>
import Chart from './charts/Chart' //导入组件
export default {
name: 'HelloWorld',
components: { Chart } //使用组件
}
</script>
<style scoped>
.chart-container{
position: relative;
width: 100%;
height: calc(100vh - 84px);
}
</style>
效果:
还有可以直接定义一个图表组件Test.vue
<style scoped>
h2{
text-align: center;
padding: 30px;
font-size: 18px;
}
#chart_example{
width: 50%;
height: 500px;
border: 1px solid red;
margin: 0 auto;
}
</style>
<template>
<div>
<h2>vue中插入Echarts示例</h2>
<div id="chart_example">
</div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
name:'Test',
data() {
return {}
},
mounted() {
let this_ = this;
let myChart = echarts.init(document.getElementById('chart_example'));
let option = {
color: ['#f44'],
tooltip : {
trigger: 'axis',
axisPointer : {
type : 'shadow'
}
},
xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'每月花费',
type:'bar',
barWidth: '60%',
data:[995,666,444,858,654,236,645,546,846,225,547,356]
}
]
};
myChart.setOption(option);
//建议加上以下这一行代码,不加的效果图如下(当浏览器窗口缩小的时候)。超过了div的界限(红色边框)
window.addEventListener('resize',function() {myChart.resize()});
},
methods: {},
watch: {},
created() {
}
}
</script>
然后在路由 router/index.js中定义:
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Test from '@/components/Test'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/test',
name: 'Test',
component: Test
}
]
})
最后跑下代码打开test url便可以看到效果: