1
<template>
<div>
<el-card class="box-card">
<div slot="header" class="clearfix">
<el-button style="float: right; padding: 3px 0" type="text">eachars图</el-button>
</div>
<!-- 内容 -->
<div class="text item">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 100%;height:600px;"></div>
</div>
</el-card>
</div>
</template>
2本图形的地址 https://gallery.echartsjs.com/editor.html?c=xSJJXiE1Wx
遇见的问题1 报错option是未定义的 解决：添加一个var
<script>
var echarts = require("echarts");
export default {
data() {
return {};
},
mounted() {
var myChart = echarts.init(document.getElementById("main")); //// 基于准备好的dom，初始化echarts实例
var xData = (function() {
var data = [];
for (var i = 1; i < 13; i++) {
data.push(i + "月份");
}
return data;
})(); //自调用函数
var option = {
backgroundColor: "green", //背景色
title: {
text: "本年商场顾客男女人数统计", //标题
subtext: "BY Wang Dingding", //理解成副标题
padding: [12, 4], //距离上下4px
x: "4%", //标题和副标题距离左边的距离
textStyle: {
color: "red", //主标题的颜色
fontSize: "22" //主标题的大小
},
subtextStyle: {
color: "#90979c", //副标题
fontSize: "16"
}
},
//提示框 与series 有关 hover显示效
tooltip: {
trigger: "axis", // 触发类型，默认数据触发，见下图，可选为：'item' 只会显示一部分 ¦ 'axis'显示整个 hover显示效果不同
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
textStyle: {
color: "#fff"
}
}
},
//网格
grid: {
borderWidth: 0, //此配置项生效的前提是，设置了 show: true
top: 110,
bottom: 95, //grid 组件离容器下侧的距离。
textStyle: {
color: "#fff"
}
},
//图例组件
legend: {
x: "4%",
top: "11%",
textStyle: {
color: "#90979c"
},
data: ["女", "男", "平均"]
},
calculable: true,
//直角坐标系 grid 中的 x 轴
xAxis: [
{
type: "category", // 'value' | log' | 'time' | 'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
axisLine: {
lineStyle: {
color: "90979c" //X轴线的颜色
}
},
splitLine: { //是否显示分隔线。默认数值轴显示，类目轴不显示。
show: false
},
axisTick: { //是否显示坐标轴刻度。
show: false
},
splitArea: { //坐标轴分隔区域的显示间隔，在类目轴中有效。默认同 axisLabel.interval 一样。
show: false
},
axisLabel: { ////是否显示刻度标签。
interval: 0
},
data: xData //X轴的数据
}
],
//直角坐标系 grid 中的 Y 轴
yAxis: [
{
type: "value",
splitLine: { ////是否显示分隔线。默认数值轴显示，类目轴不显示。
show: false // 就是这种 | | | |
},
axisLine: { //y轴的线
lineStyle: {
color: "#90979c"
}
},
axisTick: { ////是否显示坐标轴刻度。
show: false
},
axisLabel: {
interval: 0
},
splitArea: { ////坐标轴分隔区域的显示间隔，
show: false
}
}
],
//内置型数据区域缩放组件
dataZoom: [
{
show: true, //是否显示 组件。如果设置为 false，不会显示 但是缩放功能还在
height: 30,
xAxisIndex: [0],
bottom: 30,
start: 10, //数据窗口范围的起始百分比
end: 80, //数据窗口范围的结束百分比
handleIcon: //手柄的 icon 形状，支持路径字符串
"path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
handleSize: "110%", //控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，
handleStyle: {
color: "#d3dee5"
},
textStyle: {
color: "#fff"
},
borderColor: "#90979c"
},
{
type: "inside",
show: true,
height: 15,
start: 1,
end: 35
}
],
series: [ //系列列表。每个系列通过 type 决定自己的图表类型
{
name: "女", //系列名称，用于tooltip的显示，
type: "bar", //类型
stack: "总量", //数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
barMaxWidth: 35, //柱条的最大宽度，不设时自适应。支持设置成相对于类目宽度的百分比。
barGap: "10%", //不同系列的柱间距离，为百分比（如 '30%'，表示柱子宽度的 30%）。
itemStyle: {
normal: {
color: "rgba(255,144,128,1)",
label: {
show: true,
textStyle: {
color: "#fff"
},
position: "insideTop",
formatter: function(p) {
return p.value > 0 ? p.value : "";
}
}
}
},
data: [
709,
1917,
2455,
2610,
1719,
1433,
1544,
3285,
5208,
3372,
2484,
4078
]
},
{
name: "男",
type: "bar",
stack: "总量",
itemStyle: {
normal: {
color: "rgba(0,191,183,1)",
barBorderRadius: 0,
label: {
show: true,
position: "top",
formatter: function(p) {
return p.value > 0 ? p.value : "";
}
}
}
},
data: [327, 1776, 507, 1200, 800, 482, 204, 1390, 1001, 951, 381, 220]
},
{
name: "总数",
type: "line",
stack: "总量",
symbolSize: 10,
symbol: "circle",
itemStyle: {
normal: {
color: "rgba(252,230,48,1)",
barBorderRadius: 0,
label: {
show: true,
position: "top",
formatter: function(p) {
return p.value > 0 ? p.value : "";
}
}
}
},
data: [
1036,
3693,
2962,
3810,
2519,
1915,
1748,
4675,
6209,
4323,
2865,
4298
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
};
</script>
遇见问题，这是你成长的机会，如果你能够解决，这就是收获。
作者：晚来南风晚相识
