效果图：
下载echarts
npm install echarts --save在所需页面引用
import * as echarts from 'echarts';代码:
<template>
<div ref="chartB" id="chart-panel" style="width: 461px; height: 438px"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data() {
return {
acrossData: [
{ name: '北京城市学院', value: 5713 },
{ name: '北京联合大学', value: 3022 },
{ name: '北京工业大学', value: 2647 },
{ name: '首都师范大学', value: 2291 },
{ name: '首都经济贸易大学', value: 1946 },
{ name: '北凉工商大学', value: 1812 },
{ name: '北京电子科技职业学院', value: 1756 },
{ name: '北京财贸职业学院', value: 1712 },
{ name: '北京信息科技大学', value: 1666 },
{ name: '北方工业大学', value: 1621 },
{ name: '北京信息职业技术学院', value: 1559 },
{ name: '北京农学院', value: 1321 },
{ name: '首都医科大学', value: 1307 },
{ name: '北京建筑大学', value: 1302 },
{ name: '北京交通运输职业学院', value: 1299 },
{ name: '北京工业职业技术学院', value: 1183 },
{ name: '北京政法职业学院', value: 1061 },
{ name: '北京劳动保障职业学院', value: 1010 },
{ name: '北凉石油化江学院', value: 975 },
{ name: '北京航空航天大学', value: 962 },
{ name: '北京卫生职业学院', value: 960 },
{ name: '北京农业职业学院', value: 946 },
{ name: '北京第二外国语学院', value: 919 },
{ name: '北京物资学院', value: 907 },
{ name: '北京经济管理职业学院', value: 774 },
{ name: '北京青年政治学院', value: 769 },
{ name: '北京大学', value: 716 },
{ name: '北京理工大学', value: 710 },
{ name: '北京印刷学院', value: 684 },
{ name: '中国人民大学', value: 585 },
{ name: '北京师范大学', value: 580 },
{ name: '北凉警察学院', value: 546 },
{ name: '北京邮电大学世纪学院', value: 514 },
{ name: '北京京北职业技术学院', value: 503 },
{ name: '清华大学', value: 497 },
{ name: '首都经济贸易大学分校', value: 495 },
{ name: '首都体育学院', value: 468 },
{ name: '北京邮电大学', value: 467 },
{ name: '北京交通大学', value: 454 },
{ name: '北京工业大学耿丹学院', value: 449 },
{ name: '北京社会管理职业学院', value: 444 },
{ name: '北京中医药大学', value: 403 },
{ name: '首钢工学院', value: 386 },
{ name: '中央财经大学', value: 368 },
{ name: '北京服装学院', value: 347 },
{ name: '北京林业大学', value: 339 },
{ name: '北京科技大学', value: 336 },
{ name: '中国传媒大学', value: 330 },
{ name: '北京吉利学院', value: 306 },
{ name: '中国农业大学', value: 285 },
{ name: '北京交通职业技术学院', value: 280 },
{ name: '北京汇佳职业学院', value: 277 },
{ name: '北京化工大学', value: 270 },
{ name: '华北电力大学', value: 265 },
{ name: '对外经济贸易大学', value: 261 },
{ name: '首都师范大学科德学院', value: 255 },
{ name: '北京北大方正软件职业技术学院', value: 254 },
{ name: '中国民航大学', value: 248 },
{ name: '中国政法大学', value: 247 },
{ name: '中国社会科学院大学', value: 236 },
{ name: '北京体育大学', value: 227 },
{ name: '中国科学院大学', value: 223 },
{ name: '北京培黎职业学院', value: 218 },
{ name: '中华女子学院', value: 195 },
{ name: '北京经贸职业学院', value: 192 },
{ name: '中国地质大学北京', value: 186 },
{ name: '北京外国语大学', value: 186 },
{ name: '中央民族大学', value: 182 },
{ name: '中国人民公安大学', value: 180 },
{ name: '北京科技职业学院', value: 175 },
{ name: '北京第二外国语学院中瑞酒店管理学院', value: 171 },
{ name: '北京网络职业学院', value: 157 },
{ name: '四大学', value: 156 },
{ name: '中国劳动关系学院', value: 151 },
{ name: '北京语言大学', value: 151 },
{ name: '中国矿业大学（北京）', value: 147 },
{ name: '天津大学', value: 137 },
{ name: '国家行政学院', value: 134 },
{ name: '中国石油大学北京', value: 133 },
{ name: '吉林动画学院', value: 131 },
{ name: '武汉大学', value: 128 },
{ name: '北京电影学院', value: 112 },
{ name: '北京协和医学院清华大学医学部', value: 105 },
{ name: '北京工商大学嘉华学院', value: 100 },
{ name: '北京经济技术职业学院', value: 100 },
{ name: '华中科技大学', value: 93 },
{ name: '外交学院', value: 93 },
{ name: '江西科技学院', value: 82 },
{ name: '南开大学', value: 81 },
{ name: '山东大学', value: 80 },
{ name: '北京体育职业学院', value: 78 },
{ name: '哈尔滨工业大学', value: 75 },
{ name: '吉林大学', value: 73 },
{ name: '西安电子科技大学', value: 73 },
{ name: '上海交通大学', value: 71 },
{ name: '北京科技大学天津学院', value: 70 },
{ name: '中山大学', value: 68 },
{ name: '厦门大学', value: 67 },
{ name: '中国民用航空飞行学院', value: 66 },
{ name: '西安交通大学', value: 63 },
{ name: '湖南大学', value: 62 },
{ name: '中央戏剧学院', value: 60 },
{ name: '大连海事大学', value: 60 },
{ name: '中央美术学院', value: 59 },
],
};
},
mounted() {
this.pie();
},
methods: {
pie() {
// 选择dome元素 多种方法 这里使用的是 vue的 ref
var myChart = echarts.init(this.$refs.chartB);
// 做适配 跟随窗口大小来改变图形
window.addEventListener('resize', function () {
myChart.resize();
});
let option = {
// 图形背景设置 不需要可以不设置
backgroundColor: '#001552',
grid: {
// grid 组件离容器右侧的距离。
right: '10%',
// grid 组件离容器上侧的距离。
top: '10%',
// grid 组件离容器下侧的距离。
bottom: '0%',
},
// 直角坐标系 grid 中的 x 轴
xAxis: {
// 是否显示 x 轴。
show: false,
/*
坐标轴类型。
'value' 数值轴，适用于连续数据。
'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
'log' 对数轴。适用于对数数据。
*/
type: 'value',
/*
坐标轴刻度最大值。 这里可以设置最大值 必须设置 可以以自己当前的项目来设置
以当前项目数据的最大值为 基准
数据最先从大到小排列 则第一个数据就是最大值 则以最大值为基准 我做了处理 又加了最大值的0.2倍 美观一点 也可以不加
以自己当前项目为准 也可以设置一个固定的数
*/
max: this.acrossData[0].value + this.acrossData[0].value * 0.2,
},
// 直角坐标系 grid 中的 y 轴
yAxis: [
{
/*
坐标轴类型。
'value' 数值轴，适用于连续数据。
'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 yAxis.data 设置类目数据。
'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
'log' 对数轴。适用于对数数据。
*/
type: 'category',
// 是否是反向坐标轴。
inverse: true,
//
axisLine: {
// 是否显示坐标轴轴线。
show: false,
},
axisTick: {
// 是否显示坐标轴刻度。
show: false,
},
axisLabel: {
// 刻度标签与轴线之间的距离。
margin: 10,
// 刻度标签文字的颜色
color: '#b3c9d5',
/*
文字水平对齐方式，默认自动。
'left'
'center'
'right'
*/
align: 'left',
/*
文字垂直对齐方式，默认自动。
'top'
'middle'
'bottom'
*/
verticalAlign: 'bottom',
// y 轴的位置。 'left' 'right'
position: 'right',
// 文字块的内边距
padding: [0, 0, 10, 10],
// 文字大小
fontSize: 16,
},
// y轴的数据 也就是名称
data: this.acrossData.map((item) => item.name),
},
],
// 提示框组件
tooltip: {
/*
设置触发类型
'item' 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
'axis' 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
'none' 什么都不触发。
*/
trigger: 'axis',
// 坐标轴指示器配置项。
axisPointer: {
/*
指示器类型。
'line' 直线指示器
'shadow' 阴影指示器
'none' 无指示器
'cross' 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。
*/
type: 'none',
},
// 设置提示框浮层的背景颜色。
backgroundColor: 'rgba(42, 51, 74, 0.89)',
// 提示框浮层的边框颜色。
borderColor: 'transparent',
// 自定义提示样式
formatter: function (params) {
let returnData = '<div style="padding: 2px 10px;">';
returnData +=
'<span style="font-family: MicrosoftYaHei; font-size: 14px; color: rgba(210, 221, 249, 1);">' +
params[0].axisValue +
'</span><br/>';
for (let i = 0; i < params.length; i++) {
returnData +=
'<span style="display:inline-block; width:10px; height:8px; margin-right:5px; border-radius:1px; background-color:' +
params[i].color.colorStops[0].color +
'"></span>';
returnData +=
'<span style="font-family: MicrosoftYaHei; font-size: 14px; color: rgba(178, 175, 173, 1); ">' +
params[i].seriesName +
'：</span><span style="font-family: Verdana; font-size: 12px; color: rgba(210, 221, 249, 1);"">' +
params[i].value +
'</span><span style="display:inline-block; margin-left: 4px; line-height: 10px; font-family: MicrosoftYaHei; font-size: 12px; color: rgba(178, 175, 173, 1);"></span><br/>';
}
returnData += '</div>';
return returnData;
},
},
// 滚动条
dataZoom: [
{
// 是否显示 组件
show: true,
// dataZoom组件离容器右侧的距离。
right: '8%',
// dataZoom组件离容器上侧的距离。
top: '10%',
// dataZoom 组件的宽度。竖直布局默认 30，水平布局默认自适应。
width: 10,
// 是否显示detail，即拖拽时候显示详细数值信息。
showDetail: false,
// 是否开启刷选功能。
brushSelect: false,
// 布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。
// 'horizontal'：水平。 'vertical'：竖直。
orient: 'vertical',
backgroundColor: '#314d70',
// 是否在 dataZoom 组件中显示数据阴影。数据阴影可以简单地反应数据走势。
showDataShadow: false,
// 数据窗口范围的起始数值。
startValue: 0,
// 数据窗口范围的结束数值。
endValue: 10,
// 边框颜色。
borderColor: 'transparent',
// 选中范围的填充颜色。
fillerColor: '#800000',
// 是否锁定选择区域（或叫做数据窗口）的大小。
zoomLock: true,
// 控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟 dataZoom 宽度相同。
handleSize: '130%',
// 两侧缩放手柄的 icon 形状，支持路径字符串
handleIcon:
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z', // 画一个圆形
},
],
series: [
{
// 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
name: '毕业人数',
// 图形的类型
type: 'bar',
// 柱条的宽度，不设时自适应。
barWidth: 10,
// 图形样式设置
itemStyle: {
//
normal: {
// 圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。
barBorderRadius: [10],
// 设置柱形渐变色
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{ offset: 0, color: '#800000' },
{ offset: 1, color: '#6E3648' },
]),
label: {
// 是否显示标签。
show: true,
// 是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。
offset: [300, -20],
/*
标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。
字符串模板 模板变量有：
{a}：系列名。
{b}：数据名。
{c}：数据值。
{@xxx}：数据中名为 'xxx' 的维度的值，如 {@product} 表示名为 'product' 的维度的值。
{@[n]}：数据中维度 n 的值，如 {@[3]} 表示维度 3 的值，从 0 开始计数。
*/
formatter: '{c}起',
// 标签的位置。
position: 'insideLeft',
textStyle: {
// 数值样式，显示的文字大小和颜色
fontSize: '16',
color: '#d3f5fd',
fontWeight: 400,
lineHeight: '18',
},
},
},
},
// 设置选中的样式
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{ offset: 0, color: '#FF0000' },
{ offset: 0.5, color: '#FF0000' },
{ offset: 1, color: '#FFB6C1' },
]),
},
},
// 数据
data: this.acrossData,
},
],
};
myChart.setOption(option);
},
},
};
</script>
<style scoped></style>