大屏可视化简介（echarts）
简介
该使用框架echarts 类似于这种的炫酷的大屏幕设计 可以参考
VueCli使用echarts
npm安装ECharts
//一般根据官网进行安装的话会出现 //版本问题报错 npm install echarts@4.8.0 --save //如果呢 安装错误 npm uninstall echarts//这个是卸载命令
在main.js中全局引入ECharts
// 引入ECharts import echarts from echarts Vue.prototype.$echarts = echarts
在eCharts.vue使用
<div ref="chart"
:style="{ width: 500px, height: 500px }"></div>
<script>
export default {
name: "eCharts",
data() {
return {
};
},
mounted() {
//模板挂载完成后调用
this.drawEcharts();
},
methods: {
drawEcharts() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(this.$refs.chart);
// 绘制图表
myChart.setOption({
title: {
text: ECharts 入门示例
},
tooltip: {
},
legend: {
data:[销量]
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {
},
series: [{
name: 销量,
type: bar,
data: [5, 20, 36, 10, 10, 20]
}]
})
}
}
}
</script>
下面的链接是使用document.getElementById(id)获取 报错 —解决方案 出现以下效果
echarts基础配置
这边按折线图的这个api为例子:
title && tooltip
这里面的东西具体看官网里面的 文档--配置项---
//option里面的
title//对应设置图标的标题
tooltip: {
//图标的提示框组件(JS点击放上去显示对应的提示这个东西)
trigger: axis// //触发方式:触发的类型
},
legend
===============================
===============================
toolbox
toolbox: {
//工具箱组件(可以另存为图片等功能)
feature: {
saveAsImage: {
}
}
},
grid
grid: {
//网格配置 可以控制线性 柱状 图标大小
left: 3%,
right: 4%,
bottom: 3%,
containLabel: true//是否显示刻度标签 true显示 否则不显示
},
xAxis
xAxis: {
//x轴的类型
type: category,//类型 类目
boundaryGap: false,//是否让线条与坐标有缝隙
data: [周一, 周二, 周三, 周四, 周五, 周六, 周日]
},
yAxis
yAxis: {
//y轴
type: value//类型 值
},
series
color
color:[red,black,...]//可以设置多个颜色
分割线=======================================分割线
基于echarts使用的项目案例
echarts社区案例
流程图
一般基于流程图来写的antv x6插件
