vue中使用echarts绘柱形图+折线图
一、完成后效果图
二、.vue文件完整代码
<template>
<!-- 柱形图+折线图多个展示 -->
<div
id="myMaxbar"
:style="{width: '500px', height: '300px'}"
></div>
</template>
<script>
export default {
data() {
return {};
},
mounted() {
this.drawLine();
},
methods: {
drawLine() {
// 基于准备好的dom，初始化echarts实例
let myMaxbar = this.$echarts.init(document.getElementById("myMaxbar"));
// 绘制图表
myMaxbar.setOption({
color: ["#0EA9A1", "#95CE5C", "#21D86D"],
//提示框组件配置
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
textStyle: {
fontSize: 12,
color: "#fff",
},
padding: 10,
},
// 图例组件
legend: {
show: true,
top: "0",
left:'5%',
selectedMode: true,
data: [
{
name: "销售额",
textStyle: {
color: "#0EA9A1",
},
},
{
name: "销售件数",
textStyle: {
color: "#95CE5C",
},
},
{
name: "销售品种",
textStyle: {
color: "#21D86D",
},
},
],
},
//定义折线图距离左边多少右边多少的距离
grid: {
left: "2%",
right: "5%",
bottom: "16%",
containLabel: true, //区域是否包含坐标轴的刻度标签
},
xAxis: [ //定义x轴
{
type: "category", //设置x轴的类型
data: [
"茅台",
"五粮液",
"剑南春",
"郎酒",
"洋河蓝色经典",
"水井坊",
"泸州老窖",
"汾酒",
"翰格",
"茅台",
"洋河蓝色经典",
"剑南春",
"郎酒",
"洋河蓝色经典",
"水井坊",
"泸州老窖",
"汾酒",
"翰格",
"尊尼获加金牌",
"剑南春",
"郎酒",
],
nameTextStyle: {
fontSize: 14,
},
axisLabel: { //坐标轴刻度的相关设置
interval: 0, //设置成 0 强制显示所有标签。
rotate: -45, //标签旋转的角度
margin: 15,
textStyle:{
color:'#fff',
}
},
},
],
yAxis: [ // 定义y轴
{
nameTextStyle: {
color: "#666666",
fontSize: 14,
},
show: true,
type: "value",
axisLabel: { // 坐标轴刻度标签的相关设置
textStyle: {
color: "#fff",
},
},
axisLine: { // 坐标轴轴线相关设置
show: false,
},
splitLine: { // 坐标轴在网格区域中的分隔线
lineStyle: { //x轴网格样式设置
color: "#12403F",
},
},
},
],
series: [ //系列列表。每个系列通过 type 决定自己的图表类型
{
name: "销售额",
type: "bar", // 设置为柱状图
barWidth: 14,
//柱状图设置数值
label: {
normal: {
show: true,
position: 'top'
}
},
data: [
150,
232,
201,
154,
190,
330,
410,
190,
330,
410,
150,
232,
201,
154,
190,
330,
410,
190,
230,
200,
180,
],
},
{
name: "销售件数",
type: "line", // 设置为折线图
symbol: "circle",
symbolSize: [10, 10],
data: [
120,
132,
101,
134,
90,
230,
210,
190,
330,
410,
120,
132,
101,
134,
90,
230,
210,
190,
230,
200,
180,
],
},
{
name: "销售品种",
type: "line",
symbol: "circle",
symbolSize: [10, 10],
data: [
111,
122,
100,
104,
70,
210,
200,
160,
300,
400,
100,
102,
91,
124,
40,
210,
230,
140,
240,
180,
140,
],
},
],
});
},
},
};
</script>
<style>
</style>
备注
我这个有加背景图，如果是纯白，有些字体设置的#fff会看不到。