前端ECharts使用(vue)
ECharts官网:https://echarts.apache.org/examples/zh/index.html
各基础标签含义(可参考https://blog.csdn.net/qq_43299315/article/details/107952031)
title:标题
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 标题边框颜色
borderWidth: 0, // 标题边框线宽,单位px,默认为0(无边框)
padding: 5, // 标题内边距,单位px,默认各方向内边距为5 接受数组分别设定上右下左边距,同css
itemGap: 10, // 主副
···
toolbox:
orient: 'horizontal', // 布局方式,默认为水平布局,可选为: 'horizontal' ¦ 'vertical'
borderColor: '#ccc', // 工具箱边框颜色
borderWidth: 0, // 工具箱边框线宽,单位px,默认为0(无边框)
itemSize: 16, // 工具箱图形宽度
featureTitle : {
mark : '辅助线开关',
markUndo : '删除辅助线',
markClear : '清空辅助线',
dataZoom : '区域缩放',
dataZoomReset : '区域缩放后退',
dataView : '数据视图',
lineChart : '折线图切换',
barChart : '柱形图切换',
restore : '还原',
saveAsImage : '保存为图片'
legend:图例(数组)
xAxis:x轴各参数
type:category
data:数据(数组)
yAxis:y轴各参数
type:value (数据)
axisLabel: {
formatter: "¥{value} ",(修饰值)
}
series:系列样式
name:某图例
type:类型
bar:柱形图
line:折线图
pie:饼图
map:地图
scatter:散点图
data:数据(数组)
vue使用ECharts简要步骤
下载ECharts
npm i echarts
main.js引入echarts
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
各vue文件引入echarts
import * as echarts from 'echarts'
初始化图表
export default {
name: "",
components: {},
data() {
return {
option: {
title: {
text: "",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
},
},
xAxis: {
type: "category",
data: [],
},
yAxis: {
type: "value",
axisLabel: {
formatter: "{value} 件",
},
},
series: {
type: "bar",
data: [],
},
},
};
},
css部分
<div class="Echarts">
<el-tabs
style="margin-left: 20px"
v-model="activeName"
class="demo-tabs"
@tab-click="handleClick"
>
<el-tab-pane label="当前库存" name="first">
<div v-show="1 == 0">{{ textadd }}</div>
<div id="main" style="width: 600px; height: 400px"></div>
</el-tab-pane>
</el-tabs>
</div>
js部分(方法体内)
var myChart = echarts.init(document.getElementById("main"));
...后端获取数据,赋值前端
myChart.setOption(this.option);
附:
年月日横坐标初始化
let yy = new Date().getFullYear();
let mm =
new Date().getMonth() + 1 < 10
? "0" + (new Date().getMonth() + 1)
: new Date().getMonth() + 1;
let date =
new Date().getDate() < 10
? "0" + new Date().getDate()
: new Date().getDate();
this.day = yy + "年" + mm + "月" + date + "日";
-
初始化中数据可空,待后端获取数据后赋值
-
多个图例需初始化对应数量series中对象
-
{
name: “”,
type: “”,
data: [],
},
-
赋值注意各对象上下级及数据类型
-
据实际情况可先将数据全赋值0,
this.option.series[0].data = new Array(31).fill(0);
-
多张图表需重复步骤,包括初始化、css、js部分