echarts有几个主要的字段，title、legend、xAxis、yAxis、tooltip、series。
title
图表的标题
legend
用来标志图表数据，data字段的数组需要对应每个柱条的名称，鼠标hover到最顶部的legend标志，可以标志对应的图，点击legend标志会隐藏对应的图。
xAxis
配置x轴数据、样式、名称
yAxis
配置y轴数据、样式、名称
tooltip
鼠标放到图上展示的数据样式，trigger: 'axis' (有axis/item/none三个值,axis是一条竖线)
series
y轴数据，设置每个数据的名称、样式
1.柱状图
(后续补充：series中data为负，柱状图为负）
<div class="echart" id="byrsBar" :style="{ float: 'left', width: '80%', height: '400px' }"></div>mounted () {this.getByrsEcharts()}methods: {// 毕业人数getByrsEcharts () {const option = {// 标题title: {text: '毕业人数柱状图'},// 鼠标放到图上展示的数据样式，trigger: 'axis' (有axis/item/none三个值,axis是一条竖线)tooltip: {},// 用来标志图表数据，data字段的数组需要对应每个柱条的名称，鼠标hover到最顶部的legend标志，可以标志对应的图，点击legend标志会隐藏对应的图legend: {data: ['毕业人数']},// 配置x轴数据、样式、名称xAxis: {type: 'category', // 可以不写，默认type就是categorydata: ['', ''], // x轴数据name: '日期', // x轴名称// x轴名称样式nameTextStyle: {fontWeight: 600,fontSize: 18}},// 配置y轴名称，样式yAxis: {name: '数量', // y轴名称},// y轴数据，每个柱条的名称series: [{name: '毕业人数',type: 'bar', // 类型为柱状图data: [50, 100],// data为负时，柱状图数据为负// data: [-50, -100],barWidth: '20%', // 柱条宽度 每个柱条的宽度就是类目宽度的 20%// 柱子的样式itemStyle: {color: '#5574c2'}}]}const byrsBar = echarts.init(document.getElementById('byrsBar'))// 图标初始化byrsBar.setOption(option)// 渲染页面// 随着屏幕大小调节图表window.addEventListener('resize', () => {byrsBar.resize()})}}
2.折线图
（折线图更新了一下，lineStyle是线的颜色，只设置线的颜色会导致线和端点的颜色不一致，直接设置itemStyle，可以将线和端点设置为一样的颜色）
（后续更新2：smooth为true，为平滑折线图。stack:'x'为堆叠折线图）
<div class="echart" id="lwzzLine" :style="{ float: 'left', width: '80%', height: '400px' }"></div>// 论文著作getLwzzEcharts () {const option = {title: {text: '论文著作折线图'},tooltip: {},legend: {data: ['著作', '论文']},xAxis: {type: 'category',name: '年份', // x轴名称data: ['', ''] // x轴数据},yAxis: {name: '数量' // y轴名称},series: [{name: '论文',data: [10, 20],type: 'line',// smooth为true时，为平滑折线图// smooth: true,// stack是堆叠折线图，正常的折线图不需要// stack: 'x', // lineStyle是线的颜色，如果想线的颜色和端点颜色一致，可以直接用itemStylelineStyle: {color: '#94cc74',width: 4}},{name: '著作',data: [15, 30],type: 'line',// stack: 'x',lineStyle: {color: '#5574c2',width: 4}}]}const lwzzLine = echarts.init(document.getElementById('lwzzLine'))// 图标初始化lwzzLine.setOption(option)// 渲染页面// 随着屏幕大小调节图表window.addEventListener('resize', () => {lwzzLine.resize()})}
3.饼状图
(饼状图的悬浮窗数据显示：formatter: '{b}({d}%)', // 效果：会计师（100%）)
<div class="echart" id="kjjgPie" :style="{ float: 'left', width: '80%', height: '600px' }"></div>// 毕业人数getPieEcharts () {const option = {title: {// item有点多，和title重叠了// text: '会计人员结构分析饼状图'},tooltip: {},legend: {data: ['初级会计师', '中级会计师', '通过高级会计师考试','高级会计师', '正高级会计师']},// 饼状图不需要x轴和y轴// xAxis: {},// yAxis: {},// 可以直接在option里设置颜色color: ['#fc8251', '#5470c6', '#94cc74', '#ef6567', '#f9c956', '#75bedc'],series: [{// 可以指定饼状图的大小radius: '50%',type: 'pie', // 类型为饼状图label: {//echarts饼图内部显示百分比设置show: true,position: "outside", //outside 外部显示 inside 内部显示formatter: '{b}({d}%)', // 效果：会计师（100%）// formatter: '{b}:{c}: ({d}%)', // 效果：高级会计师：1：（100%）},data: [{value: 335,// 也可以给每个item设置样式// itemStyle: {// color: '#37a2da',// },name: '初级会计师'},{value: 234,name: '中级会计师'},{value: 1548,name: '通过高级会计师考试'},{value: 335,name: '高级会计师'},{value: 234,name: '正高级会计师'}]}]}const kjjgPie = echarts.init(document.getElementById('kjjgPie'))// 图标初始化kjjgPie.setOption(option)// 渲染页面// 随着屏幕大小调节图表window.addEventListener('resize', () => {kjjgPie.resize()})}
在饼状图里新增了一个修改饼状图大小的。因为饼状图太大，他的数据会出现省略号。radius是设置饼状图的半径，具体的可以去搜一搜。
另外还新增了一个显示百分比的，感觉饼状图加一个百分比会更合适一点。
