VUE echarts 柱形图

echarts 柱形图
html部分

<div id="myChart"></div>

js部分

import echarts from 'echarts'
export default {
	name: 'mycharts'
	methods: {
		drawLine() {
			// 选择容器
			let myChart = this. $echarts.init(document.getElementById('myChart'))
			// 图形配置  这里只列举一些比较常用的  或者特别的  具体细节没有比官方文档更全面了
			let option = {
				// 组件图例
				legend: {}，
                color: ['#2E5BFF', '#00CC90', '#FFBE1A'], // 折线图的颜色 有几条设置几个 如果不设置则使用默认颜色 默认颜色官网可看文档
                title: {
                	show: true, // 是否显示组件标题
                	text: '我是标题', // 标题文本
                	textStyle: {}, // 设置标题的样式 包括字体 大小 粗细 颜色 等等
                	subtext: "副标题", // 副标题 
                	subtextStyle: {}, 
                	textAlign: 'auto', // 对齐方式
                }，
                // 提示框组件  鼠标移动到图标上面展示的组件
                tooltip: {
                	show: true, // 显示？
                	trigger: 'axis' ，// 触发类型  参数：1、axis 主要柱形图 折线图使用   2、item 散点图 饼图等 3、none
                	triggerOn: 'mousemove|click', // 提示框触发方式
                	position: [10,10], // 值有两类 Array  和 Function  Function 的用法看官网 这是只做简单提示
                	// formatter: '{b0}: {c0}<br />{b1}: {c1}'， // 提示框浮层内容格式器  值的类型： string , function   可以按自己想要的形式拼接出里面的内容
                	formatter: function (params) {
                        var res = params[0].name
                        for (var i = 0, l = params.length; i < l; i++) {
                            res +=  '<br/>'+params[i].marker + params[i].seriesName + ' : ' + params[i].value+'%'; 
                        }
                        return res;
                    }
                },
                grid: {} , // 理解了一下就是图标所以区域的节本设置 包括距离上方下方左右的距离 层级等等 如果多个则使用数组对象
                // 坐标系中X轴的相关设置 
                xAxis: [{
                	show: true,
                	name: 'X轴名字'，
                	nameLocation: 'start' , // middle center start end
                	nameTextStyle: {},
                	inverse: true, //  是否反向坐标轴   若X周是1-100 为true时 则从100-1
                	axisLine: {}, // 坐标轴轴线相关设置
                	axisTick: {}, // 刻度相关设置
                	axisLabel: {}, //刻度标签设置
                	 //  坐标轴背景分隔线
                	splitLine: {
                		 show: false, //  boolean 有无
                	},
                }], 
                yAxis: {}, //坐标系中Y轴的相关设置  内部属性基本与X轴相同
                // 图表的主体 包含图表的类型 数组对象 若是折线图图 有几个对象就有几条折线
                // 折线图和柱形图混合就可以 见两个对象一个type=line 一个type=bar就是混合的了
                series: [
                	{
                		name: '入住率', // 折线图名字 可以直接反馈到 图例legend
                		type: 'bar', // 折线图
                		smooth: true, // 是否平滑
                		itemStyle: {
                			// 颜色使用函数可以根据自己的条件设置不同的颜色，可以是每一个柱子颜色都不相同 params 可以得到该条柱子的参数
                			color: (params)=> {
                				return '#eee'
                			}
                		}
                		data: [], // 折线图数据
                	}，
                ]
			}
			// 配置参数
			if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
            // 如果浏览器缩放重新渲染图表
            window.addEventListener("resize", function () {
                myChart.resize();
            });
		}
	}
}