echarts柱状图使用小总结

1、下载安装

npm install echarts -save
或者使用淘宝的镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -save

2、页面使用

//简单的柱状图
 <template>
    <div id="container5" style="width:100%;height:100%"></div>
</template>

 <script>
import echarts from 'echarts'

export default {
	data(){
		return{
		}
	},
	mounted(){
		this.start()
	}
	methods:{
		start(){
			 var chartDom = document.getElementById('container5');
			 var myChart2 = echarts.init(chartDom);
			  let option = {
			      // width:460,
			      // height:400,
			      // center:['60%','50%'],    //设置图表在画布的位置（）
			      //鼠标移上去的提示框
			      tooltip: {
			          trigger: 'axis',
			          axisPointer: {
			              type: 'shadow'
			          }
			      },
			      //图例的设置
			      legend: {
			          data:[ ]
			      },
			      //图表距离画布周围的距离
			      grid:{      
			          left:'2%',
			          right:'2%',
			          top:'2%',
			          bottom:'2%'
			      },
			      //纵坐标
			      yAxis: [{
			          type: 'category',   //纵坐标的属性
			          nameTextStyle:{   //纵坐标的字体属性
			              color:'#828383'
			          },
			          axisLine:{       //纵坐标轴线的设置
			              lineStyle:{
			                  typr:'solid',
			                  color:'#00BEF2',
			                  width:'2'
			              }
			          },
			          splitLine:{      //纵坐标上标线的设置
			              show:false
			          },
			          data: this.name
			      }],
			      //横坐标
			      xAxis: [{
			          type: 'value',
			          axisLine:{
			              lineStyle:{
			                  typr:'solid',
			                  color:'#00BEF2',
			                  width:'2'
			              }
			          },
			          splitLine:{
			              show:false
			          }
			      }],
			      series: [{
			          color:['#00BEF2',],   //柱状的颜色
			          //数值显示的设置
			          label: {    
			              show: true, // 开启显示
			              // rotate: 70, // 旋转70度
			              position: 'right', // 在上方显示
			              distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
			              verticalAlign: 'middle',
			              textStyle: { // 数值样式
			                  color: '#00BEF2',
			                  fontSize: 12
			              },
			              //可以简单使用
			              formatter: '{c}件' // 这里是显示的数据{a},{b},{c}
			              //可以使用函数
						  // formatter: (params) => {  //格式化数据的函数
					      //        console.log('我的参数',params)  
						  // }
			          },
			          data: this.value,
			          type: 'bar'
			      }]
			  };
			  myChart2.setOption(option);
			  //图表随着网页的变化自适应
			  window.addEventListener("resize", function () {
			      myChart2.resize();
			  });
		}
	}
}
 </script>

可点击此处查看更多配置
此例效果如下：