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();
});
}
}
}