<template>
<div class="about">
<h2>This is an aboutEchart page</h2>
<div id="myChart" ref="myChart"></div>
</div>
</template>
<script>
import echarts from ‘@/common/echart/echarts‘
export default {
name:‘about‘,
data(){
return{
Evaporation:[300.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
Precipitation:[200.8, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
}
},
mounted () {
// 调用绘制图表的方法
this.draw();
},
methods: {
draw () {
// 实例化echarts对象
var myChart = echarts.init(this.$refs.myChart)
// 绘制条形图
myChart.setOption({
title: {
text: ‘某地区蒸发量和降水量‘,
// subtext: ‘纯属虚构‘//副标题
x:‘center‘,//水平安放位置，默认为‘left‘，可选为：‘center‘ | ‘left‘ | ‘right‘ | {number}（x坐标，单位px）
y: ‘top‘,//垂直安放位置，默认为top，可选为：‘top‘ | ‘bottom‘ | ‘center‘ | {number}（y坐标，单位px）
textAlign: ‘left‘,//水平对齐方式，默认根据x设置自动调整，可选为： left‘ | ‘right‘ | ‘center
textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
// fontFamily: ‘Arial, Verdana, sans...‘,
fontSize: 20,
// fontStyle: ‘normal‘,
fontWeight: ‘bolder‘,
"color": "red",
}
},
tooltip: {
show : true,
trigger: ‘axis‘,//提示框
// position: [20, 20]
},
legend: {
data: [‘蒸发量‘, ‘降水量‘],
left: ‘35%‘,//图例的离左边位置，可以用像素，可以用百分比，也可以用center，right等
top: 270,//图例离顶部的位置
itemWidth: 10,//图例图标的宽
itemHeight: 10,//图例图标的高 textStyle: {
color: ‘#fff‘,//文字的具体的颜色 }
},
toolbox: {//右上角提示图标
show: true,
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: [‘line‘, ‘bar‘]},
restore: {show: true},
saveAsImage: {show: true}
}
},
calculable: true,
xAxis: [
{
type: ‘category‘,
data: [‘日本‘, ‘韩国‘, ‘3月‘, ‘4月‘, ‘5月‘, ‘6月‘, ‘7月‘, ‘8月‘, ‘9月‘, ‘10月‘, ‘11月‘, ‘12月‘],
splitLine: {show: false},//去除网格分割线
axisTick: {
show: false, //是否显示多出来的网状线 默认为true
alignWithLabel: true
},
//用于设置x下面的字体
axisLabel:{
show:true, //这里的show用于设置是否显示x轴下的字体 默认为true
interval:0, //可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
textStyle:{ //textStyle里面写x轴下的字体的样式
color:‘#333‘,
fontSize:10
}
},
axisLine:{
show:true, //这里的show用于设置是否显示x轴那一条线 默认为true
lineStyle:{ //lineStyle里面写x轴那一条线的样式
color:‘#000‘,
width:2, //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
}
}
},
],
yAxis: [
{
type: ‘value‘,
min:0, //y轴的最小值
max:300, //y轴最大值
interval:50, //值之间的间隔
//上面的三个值可以根据自己需求随意设置 不设置时会根据图中的值自动生成相应的值
splitLine:{show:true}, //去除网状线 默认为true
//用于设置y轴的字体
axisLabel:{
show:true, //这里的show用于设置是否显示y轴下的字体 默认为true
textStyle:{ //textStyle里面写y轴下的字体的样式
color:‘#333‘,
fontSize:10
}
},
//用于设置y轴的那一条线
axisLine:{
show:true, //这里的show用于设置是否显示y轴那一条线 默认为true
lineStyle:{ //lineStyle里面写y轴那一条线的样式
color:‘#6FC6F3‘,
width:2, //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
}
},
axisTick: {
show: false, //是否显示网状线 默认为true
alignWithLabel: true
},
}
],
series: [
{
name: ‘蒸发量‘,
type: ‘bar‘,
data: this.Evaporation,
itemStyle: {
normal: {
color: ‘blue‘,//设置柱子颜色
label: {
show: true,//柱子上显示值
position: ‘top‘,//值在柱子上方显示
textStyle: {
color: ‘blue‘,//值得颜色
fontSize:8
},
lineStyle:{
color:‘#000‘
}
}
},
},
// barWidth: 150//设置柱子宽度，单位为px
// markPoint: { //气泡
// data: [
// {type: ‘max‘, name: ‘最大值‘},
// {type: ‘min‘, name: ‘最小值‘}
// ]
// },
// markLine: { //添加线
// data: [
// {type: ‘average‘, name: ‘平均值‘}
// ]
// }
},
{
name: ‘降水量‘,
type: ‘bar‘,
data: this.Precipitation,
itemStyle: {
normal: {
color: ‘green‘,//设置柱子颜色
label: {
show: true,//柱子上显示值
position: ‘top‘,//值在柱子上方显示
textStyle: {
color: ‘green‘,//值得颜色
fontSize:8
},
lineStyle:{
color:‘#000‘
}
}
},
}
}
]
});
}
},
created(){
},
components: {
}
}
</script>
<style scoped>
#myChart {
width: 95%;
height: 300px;
margin: 20px auto;
border: 1px solid #CCC
}
</style>
原文：https://www.cnblogs.com/xzybk/p/12566417.html