话不多说，先上效果图！
帧率调的有点高，图片跳的像赶去投胎😂😂，还请大家见谅啊
如果我实现的恰巧有您需要的些许，那请您往里走—>
先说前面，整个内容是从引入Echarts后，图表创建实例开始的，如果只是想了解对应部分的内容，请您直接跳转到对应目录下。
实例创建- -画布
首先页面内要有一个放图表的容器：
<div class="chart" ref="chart"></div>
你需要定义它的宽高，至于样式，就看个人需求了。
注意：
这里是不存在什么我不定义，我用内容撑起这狗屁理论。没有容器，你图表实例都没地方放哦~
其次创建一个Echarts实例
这里要用到Echarts的API：echarts. init
具体使用：let chart = echarts.init(this.$refs.chart);
括号里面就是获取dom元素的方法，管你通过Id还是类名，或者像我一样用$ref，随便你写。
注意：
不能在单个容器上初始化多个 ECharts 实例
到这里，实例创建好，也就相当于我们买好画布了，接下来就该买颜料了。
定义数据- -颜料
也就是x轴，y轴的数据啦，你可以直接定义好，也可以使用接口数据（这样就是属于动态的了）。
具体的内容在配置项里讲—>>>
配置项- -画笔
单一的图表俺就不介绍了，官网说的比我详细：
折线图、柱状图、饼图等单一图表示例
那我就按照题头的效果图分块介绍我的实现步骤：
一个柱子显示多个数据（多系列）—series
这是在配置项series里面设置的：
瞅瞅我实现上面的代码—>
series: [
{
name: '最高分',//系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列
type: 'bar',//图表类型
barGap: 0,//不同系列的柱间距离，为百分比
label: labelOption,//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。labelOption是我定义好的，下面有介绍
emphasis: {
focus: 'series',//聚焦当前高亮的数据所在的系列的所有图形
},
data: data1,//系列中的数据内容数组。data1是我定义好的，因为我的数据需要切换改变，不是固定的
},
{
name: '最低分',
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series',
},
data: data2,
},
{
name: '平均分',
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series',
},
data: data3,
},
],
明白了吧，这玩意儿就是series数组对象里面的对象，你设置几个，就几个放一起。
至于series里面的配置项，俺烦请您看官网：series的配置项
还是那句话，基础的内容官网更详细。
当然，我非常欢迎有想法的小伙伴一起交流啦~
控制多系列显隐的图例组件—legend
就图表顶部的这个，点击变灰，这系列的数据就不会在图表里面展示了。
实现代码：
legend: {
data: ['最高分', '最低分', '平均分'],//图例项的名称，应等于某系列的name值。和我series里面每个对象的name属性是对应的
},
颜色都是用的默认的，花里胡哨那还是得看官网：
详细介绍：legend的配置项
同一数据使用不同图表展示—toolbox
就侧边这个，能看数据视图，能切换折线图、柱状图、堆叠图，还能把图表保存为图片。
功能看着老全了，就是有bug。
动态类型切换的时候，活性不是很自由的切换。
具体的问题就是：
柱状图切换堆叠：正常
堆叠切折线：Y轴刻度不会改变
折线切柱状：出现堆叠图而不是柱状图
再次点击堆叠：堆叠活性取消，柱状图出现
我不知到有人已经解决这个问题了没，反正我c不到解决方案，已经给Echarts提了issues，看什么时候能解决吧。
代码part：
toolbox: {
show: true,//是否显示工具栏组件。
orient: 'vertical',//工具栏 icon 的布局朝向。
left: 'right',//工具栏组件离容器左侧的距离。
top: 'center',//工具栏组件离容器上侧的距离。
feature: {
mark: { show: true },
dataView: { show: true, readOnly: true, title: '数据视图' },//数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
magicType: { show: true, type: ['line', 'bar', 'stack'], title: { line: '切换为折线图', bar: '切换为柱状图', stack: '切换为堆叠' } },//动态类型切换
restore: { show: true, title: '还原' },//配置项还原。
saveAsImage: { show: true, title: '保存为图片' },//保存为图片。
},
},
官网详细介绍：toolbox的配置项
多句嘴，之前Echarts的工具栏的提示是中文的，现在的版本一般都提示英文。
想要中文提示，就把toolbox的feature里面的配置项起个名字：title，就可以了。
图形上的提示内容—label
这其实是series里面的配置项，单拎出来了属于是。
注意配置归配置，要想显示还得配合tooltip使用。
代码part：
tooltip: {
trigger: 'axis',//触发类型。
axisPointer: {
type: 'shadow',// 阴影指示器
},
},
let labelOption = {
show: true,//是否显示标签。
rotate: 0,//标签旋转。从 -90 度到 90 度。正值是逆时针。
position: ['50%', '50%'],//标签的位置。
align: 'center',//文字水平对齐方式，默认自动。
verticalAlign: 'middle',//文字垂直对齐方式，默认自动。
formatter: '{c}',//标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。
fontSize: 16,//文字的字体大小。
fontWeight: 'bolder',//文字字体的粗细。
rich: {
name: {},//在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果
},
};
图表的数据信息展示都在这里设置：
官网详细介绍：
tooltip的配置项
series的label配置项
x轴数据很多，拖动展示—dataZoom
代码part：
dataZoom: [
{
type: 'slider',//滑动条型数据区域缩放组件
show: showdatazoom,//是否显示 组件。
start: 0,//数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
end: 50,//数据窗口范围的结束百分比。范围是：0 ~ 100。
handleSize: 5,//控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟 dataZoom 宽度相同。
},
],
官网详细介绍：dataZoom的配置项
好了，整个图表我涉及到的内容都分块介绍完了，我把完整代码贴在文章最后。
接下来说点不一样的，就是我使用过程中遇到的问题。
动态生成图表问题
就是你在这个容器内，设置了其他的开关控制数据的变化。
这时候呢，之前渲染好的图表就要替换成依靠新数据生成的新图表。
千万千万不要选择直接替换！！！
你会发现，新图表和老图表直接哥俩好，重叠在一起了。。。
所以呢，我们在渲染新图表的时候要把老图表给销毁掉。
这个销毁说着倒是简单，实际是一把辛酸泪啊…
我之前有做过记录，想要了解的直接移步：图表切换显示遇到的问题
那不想看的就这样：
1、全局保存创建的图表实例
2、在数据切换触发的方法内判断图表实例是否已经存在，存在就销毁再调用方法，不存在直接调用
完整代码
getChart() {
this.chart = echarts.init(this.$refs.chart);
// 把配置和数据放这里
let labelOption = {
show: true,
rotate: 0,
position: ['50%', '50%'],
align: 'center',
verticalAlign: 'middle',
formatter: '{c}',
fontSize: 16,
fontWeight: 'bolder',
rich: {
name: {},
},
};
let datax = [];
let data1 = [];
let data2 = [];
let data3 = [];
let showdatazoom = false;//控制滑柄是否显示
if (this.chartData[0].gradeRanking) {
this.chartData.sort(function (a, b) {
return a.gradeRanking - b.gradeRanking;
});
}
this.chartData.forEach((item) => {
datax.push(item.departmentName);
data1.push(item.highestScore);
data2.push(item.lowestScore);
data3.push(item.averageScore);
if (item.gradeRanking && this.chartData.length > 5) {
showdatazoom = true;
}
});
//这里之上到let datax = [];都是我处理数据的内容，我不删去是因为下面有用到数据，省的没头没尾的
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: {
data: ['最高分', '最低分', '平均分'],
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: { show: true },
dataView: { show: true, readOnly: true, title: '数据视图' },
magicType: { show: true, type: ['line', 'bar', 'stack'], title: { line: '切换为折线图', bar: '切换为柱状图', stack: '切换为堆叠' } },
restore: { show: true, title: '还原' },
saveAsImage: { show: true, title: '保存为图片' },
},
},
dataZoom: [
{
type: 'slider',
show: showdatazoom,
start: 0,
end: 50,
handleSize: 5,
},
],
xAxis: {
type: 'category',
axisTick: { show: false },
data: datax,
},
yAxis: {
type: 'value',
},
series: [
{
name: '最高分',
type: 'bar',
barGap: 0,
label: labelOption,
emphasis: {
focus: 'series',
},
data: data1,
},
{
name: '最低分',
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series',
},
data: data2,
},
{
name: '平均分',
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series',
},
data: data3,
},
],
});
},
511
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
