标签：vue echats api color 图例 注意事项 type echarts
前言
1、官方地址：echats官方网站
2、官方api文档地址：官方api文档地址
3、社区：echats社区，可以找到很多案例
社区中我也写了一些案例，不过以复杂图例居多，普通图例很少写
一、安装echats
// 使用npm
npm install echarts --save
// 使用淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -save
二、引入echats
如果使用频率较少可使用局部引入，这样会节省资源；如使用频率很高，为了省事可以使用全局引入；看项目具体需求决定引入方式。
1、局部引入
在需要使用的.vue文件中引入
import echarts from "echarts";
使用
this.chart = echarts.init(this.$refs.mineEchats);
2、全局引入
在main.js中引入并注册
const echarts = require("echarts");
Vue.prototype.$echarts = echarts;
使用
this.chart = this.$echarts.init(this.$refs.mineEchats);
三、使用echats
不具体一步一步介绍了，以柱状图举例，写个demo，每个 api 的含义我尽量注释下，刚接触的同学可能不太熟悉，写多了这些 api 都是信手捏来的。
echats的 api 很多种，有些并不是通用的，有的有坐标系，有的无坐标系，柱状图属于常用的那种，很多 api 都重复，更多具体的 api 得看echats官方文档了。
<template>
<div class="echats">
<p>柱状图demo</p>
<div class="mineEchats" ref="mineEchats"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "",
components: {},
data() {
return {};
},
computed: {},
watch: {},
mounted() {
this.draw();
},
methods: {
draw() {
this.chart = echarts.init(this.$refs.mineEchats);
const option = {
// 是否开启渲染动画
calculable: true,
// 距离dom四周的距离
grid: {
top: "25%",
left: "10%",
right: "10%",
bottom: "5%",
containLabel: true
},
// 图例组件，用来显示不同系列的标记
legend: {
data: ["午餐消费金额", "晚餐消费金额"],
align: "left",
right: "3%",
top: "5%",
itemGap: 30,
icon: "circle",
itemWidth: 12, // 图例图形宽度
itemHeight: 12, // 图例图形高度
textStyle: {
color: "#333",
fontSize: 14
}
},
// 鼠标移上去显示悬浮信息
tooltip: {
show: true,
trigger: "axis",
axisPointer: {
type: "shadow" // 默认为直线,可选为：'line' | 'shadow'
}
},
// x轴坐标系
xAxis: [
{
type: "category", // 默认显示类目名
boundaryGap: true, // 坐标轴两端是否留白
nameTextStyle: {
color: "#333",
fontSize: 14
},
// 坐标轴轴线相关设置
axisLine: {
lineStyle: {
color: "#979797",
type: "dotted" // solid、dashed、dotted（实线、虚线、圆点虚线）
}
},
// 坐标轴刻度标签相关设置
axisLabel: {
interval: "auto",
color: "#333",
padding: [5, 0, 0, 0],
rotate: 0
},
// 坐标轴刻度相关设置
axisTick: {
show: false
},
data: ["周一", "周二", "周三", "周四", "周五"]
}
],
// y轴坐标系
yAxis: [
{
type: "value",
name: "午餐消费金额（元）",
nameTextStyle: {
color: "#333",
fontSize: 14
},
axisLine: {
lineStyle: {
color: "#979797",
type: "dotted" // solid、dashed、dotted（实线、虚线、圆点虚线）
}
},
// 坐标轴在grid区域的分隔线
splitLine: {
show: true,
lineStyle: {
color: "#979797",
type: "dotted" // solid、dashed、dotted（实线、虚线、圆点虚线）
}
},
axisLabel: {
color: "#333"
},
axisTick: {
show: false
}
},
{
type: "value",
name: "用餐次数",
nameTextStyle: {
color: "#333",
fontSize: 14
},
axisLine: {
lineStyle: {
color: "#979797",
type: "dotted" // solid、dashed、dotted
}
},
splitLine: {
show: false
},
axisLabel: {
interval: "auto",
color: "#333"
},
axisTick: {
show: false
}
}
],
// 专门用来放数据和设置图表类型等属性
series: [
{
name: "午餐消费金额",
type: "bar", // 图表类型
barWidth: 10,
data: [20, 30, 15, 24, 18]
},
{
name: "晚餐消费金额",
type: "bar",
barWidth: 10,
data: [15, 23, 28, 12, 22]
}
],
color: ["#2197FC", "#A6D5FE"]
};
this.chart.setOption(option);
}
}
};
</script>
<style lang="scss" scoped>
.echats {
p {
margin-left: 20px;
font-size: 18px;
font-weight: bold;
}
.mineEchats {
width: 600px;
height: 300px;
}
}
</style>
注意事项：
1、echats的绘制必须在dom渲染完成之后才能进行，所以调用方法不可以放在created里面;
2、echats提供了 Title 的 api ，但不建议使用，因为在没有数据时无法显示标题，会造成页面显示空白；
3、如果需要echats自动刷新且有连续变化的动画，则不可以在echats绘制完成后销毁图例；
4、如echats只渲染一次，则最好在绘制完成后销毁图例，避免重新进入页面时重新渲染dom（此案例并没有添加销毁图例的代码，可以自行百度）。
四、效果
图例详解
标签：vue,echats,api,color,图例,注意事项,type,echarts 来源： https://blog.csdn.net/m0_53808238/article/details/117292310
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。