Echats的使用教程(Vue)
1.安装echats
npm install echarts
可能会遇到axios版本不匹配,可以拷贝其他可用项目的axios放入node_modules中
2.在main.js中引入
import * as echarts from ‘echarts’;
将Echats挂载到Vue上
Vue.prototype.$echarts = echarts;
3.按需引入需要的图表,以柱状图为例
<template>
<div>
<div id="main" style="width: 600px;height:400px;"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
data() {
return {
option :{
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow' //鼠标移上柱状图显示效果
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [ //横坐标
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], //横排下标
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [ //纵坐标
{
type: 'value' //鼠标移上柱状图的显示数值
}
],
series: [
{
name: '哈哈哈', //鼠标移上柱状图的显示的名字
type: 'bar',
barWidth: '60%',
data: [10, 52, 200, 334, 390, 330, 220] //数据
}
]
}
}
},
methods: {
showEchats() {
var myChart = echarts.init(document.getElementById('main'))
var option = this.option
option && myChart.setOption(option)
},
},
mounted() {
this.showEchats()
},
}
</script>
<style scoped>
</style>
详细可以去echats官网学习!!!!获取 ECharts - 入门篇 - 使用手册 - Apache ECharts