vue中使用echat简写
1、安装echat模块
npm install echarts --save
2、在项目中引入echat模块,并且使用它,比如在main.js中写下如下代码
import echarts from 'echarts'; //引入echats
Vue.prototype.$echarts = echarts; //将echarts注册成Vue的全局属性
3、在自己的example.vue代码中使用它
1)界面元素中添加如下代码,用来将后续的图标文件放入容器中
<div>
<div id="circleCenter" class="circleCenter" ></div>
</div>
2)定义图标的相关初始化内容,并且展现在界面上
//以下方法写在method块中
draw(){
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('barBlue'))
// 绘制图表
myChart.setOption(
{
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['7月1日', '7月2日', '7月3日', '7月4日', '7月5日', '7月6日', '7月7日', '7月8日', '7月9日'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'直接访问',
type:'bar',
barWidth: '10%',
data: [10, 52, 200, 334, 390, 330, 220, 300, 800]
}
]
}
);
}
3)在mounted块中调用上述代码
this.draw();
4、最终效果图