一、记录
记录一下自己的学习过程,学习网站:https://echarts.apache.org/zh/index.html,没事可以去看看网站的文档,挺全的。
二、柱状图实现代码
先用npm下载安装一下echarts组件
npm install echarts
学习的时候写的代码,大部分地方都写了注释,实现效果是个双状图,删掉一个数据就是单柱状图,复杂的柱状图实现可以去echarts网站学习一下。如果想对轴进行设置就找axisLine,对刻度进行设置找axisTick,对刻度标签进行设置找axisLabel。
<template>
<div id="main_bar" style="width: 100%; height: 450px"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: "bar",
data() {
return {
xy_data: [
{name: '一', value: 100, value2: 190,},
{name: '二', value: 180, value2: 110,},
{name: '三', value: 120, value2: 170,},
{name: '四', value: 160, value2: 160,},
{name: '五', value: 140, value2: 130,},
{name: '六', value: 280, value2: 240,},
{name: '七', value: 320, value2: 300,},
],
};
},
created() {
this.initBar();
},
methods: {
initBar() {
// 当出现获取不到节点的时候使用this.$nextTick,否则可用,也可不用
this.$nextTick(() =>{
// 基于准备好的dom,初始化echarts实例
let myChart = echarts.init(document.getElementById('main_bar'));
// 指定图表的配置项和数据
let option = {
// echarts标题
title: {
text: '柱状图'
},
tooltip: {},
// 跟series里面相对应
legend: {
color: ['#dd6b66', '#759aa0',],
data: ['短袖', '鞋子']
},
xAxis: {
data: this.xy_data.map(item => item.name),
// 轴设置
axisLine: {
width: 90,
symbol: ['arrow', 'arrow'],
},
// 刻度标签
axisLabel: {
interval: '0',
// 默认显示,值为true
// show: false,
// 哭刻度线与标签的距离
margin: 10,
// 标签角度,默认逆时针为0,默认顺时针为360,
// rotate: -90,
// 字体风格,默认为normal
// fontStyle: 'italic',
// 字体大小
// fontSize: 10,
// 字符串模板
formatter: '{value}月',
// 文字位置
// align: 'left'
// verticalAlign: 'bottom',
// 配置了width,overflow才会生效
width: 10,
overflow: 'break',
},
// 刻度设置
axisTick: {
interval: '0',
alignWithLabel: true,
// 刻度线朝内,默认朝外
inside: true,
length: 6,
// 刻度线样式设置
lineStyle: {
type: 'dashed',
// ...
}
},
type: 'category',
name: '时间',
nameLocation: 'middle',
nameTextStyle: {
// width: 30,
// height: 40,
// borderColor: '#dd6b66',
// borderWidth: 1,
padding: 40,
},
},
yAxis: {},
series: [
{
name: '短袖',
// 此系列自己的调色盘。
color: [
'#dd6b66',
// '#759aa0',
// '#e69d87',
// '#8dc1a9',
// '#ea7e53',
// '#eedd78',
// '#73a373',
// '#73b9bc',
// '#7289ab',
],
type: 'bar',
data: this.xy_data.map(item => item.value)
},
{
name: '鞋子',
// 此系列自己的调色盘。
color: [
// '#dd6b66',
'#759aa0',
],
type: 'bar',
data: this.xy_data.map(item => item.value2)
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
})
},
}
};
</script>