三 柱状图
3.1 带背景色的、单个柱子柱状图
-
添加背景色，宽度
barWidth: 40, // 柱状图的宽度 showBackground:true, backgroundStyle:{ color:'#eee' }, -
给某一个柱子设置样式
-
显示在柱子上
label: {
// 展示具体柱状图的数值
show: true
},
案例
option = {
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(0,0,0,0.8)',
borderColor: '#ccc',
borderWidth: 1,
textStyle: {
color: '#fff'
},
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
}
}
],
color: 'red',
series: [
{
name: 'Direct',
type: 'bar',
barWidth: '60%',
data: [10, 52, 200, 334, 390, 330, 220]
}
]
};
3.2接替瀑布流图
-
两个数组， 下边数组是透明色
-
进行堆叠：给每一个添加 stack:‘a’,
-
添加 label
-
移动显示提示框：
提示框添加【背景】
格式化提示内容
步骤1:
取第二个数据
步骤二：显示轴名称（周一）否则提示框显示不出来
步骤三：
3.3 条形图
-
设置名称： 给每一个添加na me ，图例就可以显示出来
-
添加提示框阴影
tooltip:{//提示框 trigger: 'axis', axisPointer:{ type:'shadow' } },
3.4 堆叠条形图
案例2
案例：echarts修改tooltip默认样式（使用formatter函数拼接加工）
默认tooltip样式图
修改过后的tooltip样式图
option = {
xAxis: [
{
type: 'category', // 类别
data: ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白龙马", "白骨精", "狐狸精"], // x轴类别对应的值
splitLine: {
// 网格线配置
show: true,
lineStyle: {
color: ['#e9e9e9'],
width: 1,
type: 'solid'
}
} // 给x轴加上网格线
}
],
yAxis: {
type: 'value',
splitLine: {
// 网格线配置
show: true,
lineStyle: {
color: ['#e9e9e9'],
width: 1,
type: 'solid'
}
}, // 给y轴加上网格线
axisLabel: {
formatter: function (value, index) {
return value + '分';
}
}
},
tooltip: {
trigger: 'axis', // 鼠标移入到柱子里面就会有一个提示，默认是item方式，如果有多个柱状图，堆在一块item就不太好了，个人喜欢axis方式的
triggerOn: 'mousemove', // 什么时候触发提示小图标，点击click的时候，或者鼠标滑过的时候，默认是mousemove鼠标滑过
// backgroundColor: 'rgba(0,0,0,0.8)',//弹框背景
// borderColor: '#ccc',//弹框边框颜色
// borderWidth: 1,//弹框边框大小
// textStyle: { //弹框文字颜色
// color: '#fff'
// }
/* formatter可以以字符串模板方式写，也可以用回调函数写，不过字符串模板略有限制，我们使用回调函数会灵活点 */
formatter: function (params) {
console.log('--x轴类目对应的参数数组--', params); // 比如当鼠标hover到孙悟空同学这一列的时候，这个params数组存放的每一项数据分别是语数外三门成绩的具体信息
var res = // 字符串形式的html标签会被echarts转换渲染成数据，这个res主要是画的tooltip里的上部分的标题部分
"<div style='margin-bottom:5px;padding:0 12px;width:100%;height:24px;line-height:24px;background:pink;border-radius:3px;'><p>" +
params[0].name +
' </p></div>';
for (var i = 0; i < params.length; i++) {
//因为是个数组，所以要遍历拿到里面的数据，并加入到tooltip的数据内容部分里面去
res += `<div style="color: #fff;font-size: 14px; padding:0 12px;line-height: 24px">
<span style="display:inline-block;margin-right:5px;border-radius:2px;width:10px;height:10px;background-color:${[
params[i].color // 默认是小圆点，我们将其修改成有圆角的正方形，这里用的是模板字符串。并拿到对应颜色、名字、数据
]};"></span>
${params[i].seriesName}
${params[i].data}分
</div>`;
}
return res; // 经过这么一加工，最终返回出去并渲染，最终就出现了我们所看的效果
}
},
legend: {
// legend 是对series进行筛选，所以data中每一项就是series中的每一项的标识，所以就是以name为标识
data: ['语文成绩', '数学成绩', '英语成绩']
},
series: [
{
name: '语文成绩',
data: [115, 198, 88, 77, 99, 123, 36],
type: 'bar', // 类型为柱状图
barWidth: 40, // 柱状图的宽度
label: {
// 展示具体柱状图的数值
show: true
},
barGap: '0',
/*
注意，如果想要把数据堆在一块，堆叠放置，只需要在series数组中的每个对象中都加入stack属性，stack英文单词的释义是：
一叠，一摞，一堆的意思，设置stack的属性值是什么倒无所谓，但是要让其stack的属性值保持一致，保持一致，才会堆叠到一块。
*/
stack: '值无所谓，但要保持一致'
},
{
name: '数学成绩',
data: [88, 89, 77, 66, 100, 145, 53],
type: 'bar', // 类型为柱状图
barWidth: 40, // 柱状图的宽度
label: {
// 展示具体柱状图的数值
show: true
},
/*
注意，如果想要把数据堆在一块，堆叠放置，只需要在series数组中的每个对象中都加入stack属性，stack英文单词的释义是：
一叠，一摞，一堆的意思，设置stack的属性值是什么倒无所谓，但是要让其stack的属性值保持一致，保持一致，才会堆叠到一块。
*/
stack: '值无所谓，但要保持一致'
},
{
name: '英语成绩',
data: [18, 55, 42, 63, 77, 85, 58],
type: 'bar', // 类型为柱状图
barWidth: 40, // 柱状图的宽度
label: {
// 展示具体柱状图的数值
show: true
},
/*
注意，如果想要把数据堆在一块，堆叠放置，只需要在series数组中的每个对象中都加入stack属性，stack英文单词的释义是：
一叠，一摞，一堆的意思，设置stack的属性值是什么倒无所谓，但是要让其stack的属性值保持一致，保持一致，才会堆叠到一块。
*/
stack: '值无所谓，但要保持一致'
}
]
};
vue代码
<template>
<div class="echartsBox" id="main"></div>
</template>
<script>
export default {
data() {
return {
xData: ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白龙马", "白骨精", "狐狸精"],
yData1: [115, 198, 88, 77, 99, 123, 36],
yData2: [88, 89, 77, 66, 100, 145, 53],
yData3: [18, 55, 42, 63, 77, 85, 58],
grid: {
// 网格线配置
show: true,
lineStyle: {
color: ["#e9e9e9"],
width: 1,
type: "solid",
},
},
};
},
mounted() {
// 在通过mounted调用让echarts渲染
this.echartsInit();
},
methods: {
echartsInit() {
let main = document.getElementById("main"); // 获取dom元素作为eacharts的容器
this.$echarts.init(main).setOption({
xAxis: [
{
type: "category", // 类别
data: this.xData, // x轴类别对应的值
splitLine: this.grid, // 给x轴加上网格线
},
],
yAxis: {
type: "value",
splitLine: this.grid, // 给y轴加上网格线
axisLabel: {
formatter: function (value, index) {
return value + "分";
},
},
},
tooltip: {
trigger: "axis", // 鼠标移入到柱子里面就会有一个提示，默认是item方式，如果有多个柱状图，堆在一块item就不太好了，个人喜欢axis方式的
triggerOn: "mousemove", // 什么时候触发提示小图标，点击click的时候，或者鼠标滑过的时候，默认是mousemove鼠标滑过
/* formatter可以以字符串模板方式写，也可以用回调函数写，不过字符串模板略有限制，我们使用回调函数会灵活点 */
formatter: function (params) {
console.log("--x轴类目对应的参数数组--", params); // 比如当鼠标hover到孙悟空同学这一列的时候，这个params数组存放的每一项数据分别是语数外三门成绩的具体信息
var res = // 字符串形式的html标签会被echarts转换渲染成数据，这个res主要是画的tooltip里的上部分的标题部分
"<div style='margin-bottom:5px;padding:0 12px;width:100%;height:24px;line-height:24px;background:pink;border-radius:3px;'><p>" +
params[0].name +
" </p></div>";
for (var i = 0; i < params.length; i++) {
//因为是个数组，所以要遍历拿到里面的数据，并加入到tooltip的数据内容部分里面去
res += `<div style="color: #fff;font-size: 14px; padding:0 12px;line-height: 24px">
<span style="display:inline-block;margin-right:5px;border-radius:2px;width:10px;height:10px;background-color:${[
params[i].color, // 默认是小圆点，我们将其修改成有圆角的正方形，这里用的是模板字符串。并拿到对应颜色、名字、数据
]};"></span>
${params[i].seriesName}
${params[i].data}分
</div>`;
}
return res; // 经过这么一加工，最终返回出去并渲染，最终就出现了我们所看的效果
},
},
legend: {
// legend 是对series进行筛选，所以data中每一项就是series中的每一项的标识，所以就是以name为标识
data: ["语文成绩", "数学成绩", "英语成绩"],
},
series: [
{
name: "语文成绩",
data: this.yData1,
type: "bar", // 类型为柱状图
barWidth: 40, // 柱状图的宽度
label: {
// 展示具体柱状图的数值
show: true,
},
barGap: "0",
/*
注意，如果想要把数据堆在一块，堆叠放置，只需要在series数组中的每个对象中都加入stack属性，stack英文单词的释义是：
一叠，一摞，一堆的意思，设置stack的属性值是什么倒无所谓，但是要让其stack的属性值保持一致，保持一致，才会堆叠到一块。
*/
stack: "值无所谓，但要保持一致",
},
{
name: "数学成绩",
data: this.yData2,
type: "bar", // 类型为柱状图
barWidth: 40, // 柱状图的宽度
label: {
// 展示具体柱状图的数值
show: true,
},
/*
注意，如果想要把数据堆在一块，堆叠放置，只需要在series数组中的每个对象中都加入stack属性，stack英文单词的释义是：
一叠，一摞，一堆的意思，设置stack的属性值是什么倒无所谓，但是要让其stack的属性值保持一致，保持一致，才会堆叠到一块。
*/
stack: "值无所谓，但要保持一致",
},
{
name: "英语成绩",
data: this.yData3,
type: "bar", // 类型为柱状图
barWidth: 40, // 柱状图的宽度
label: {
// 展示具体柱状图的数值
show: true,
},
/*
注意，如果想要把数据堆在一块，堆叠放置，只需要在series数组中的每个对象中都加入stack属性，stack英文单词的释义是：
一叠，一摞，一堆的意思，设置stack的属性值是什么倒无所谓，但是要让其stack的属性值保持一致，保持一致，才会堆叠到一块。
*/
stack: "值无所谓，但要保持一致",
},
],
});
},
},
};
</script>
<style lang="less" scoped>
.echartsBox {
width: 900px;
height: 500px;
}
</style>
3.5 温度计
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/echarts.min.js"></script>
</head>
<body>
<div id="ec" style="width:600px;height:400px"></div>
</body>
<script>
var ech = document.getElementById("ec")
var mychart = echarts.init(ech)
var options = {
legend:{
align:'left',
orient:'vertical',
left:"0%"
},
title:{
textAlign:'center',
left:"50%",
text:"衣服销量",
subtext:"第一季度"
},
series: [
{
type: 'pie',
// radius: '50%',
radius: ['40%', '60%'],
roseType: 'area',
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
}
mychart.setOption(options)
</script>
</html>
扫一扫
2375
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
