最近公司的产线系统要做可视化数据，现在多数公司都使用的是百度的Echarts，相当于封装了JS后，使用对象语法再配置，不是很难，就是比较繁琐，写个样本文档，以供以后参考
一、基本使用
// 引用布局
<script src="js/flexible.js"></script>
// 关联图表
let myChart = echarts.init(document.querySelector("xxx"))
// 挂载图表
myChart.setOption(option);
// 图表大小自适应
window.addEventListener('resize', function() {myChart.resize()})
插件: cssrem Easy LESS
Echarts-基础配置
主要配置：series xAxis yAxis grid tooltip title legend color
series: 系列列表。每个系列通过 type 决定自己的图表类型,图标数据，指定什么类型的图标，可以多个图表重叠。
xAxis: 直角坐标系 grid 中的 x 轴
boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间
yAxis: 直角坐标系 grid 中的 y 轴
grid: 直角坐标系内绘图网格
title: 标题组件
tooltip: 提示框组件
legend: 图例组件
color: 调色盘颜色列表
数据堆叠，同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。
option = {
// color设置我们线条的颜色 注意后面是个数组
color: ['pink', 'red', 'green', 'skyblue'],
// 设置图表的标题
title: {
text: '折线图堆叠123'
},
// 图表的提示框组件
tooltip: {
// 触发方式
trigger: 'axis'
},
// 图例组件
legend: {
// series里面有了 name值则 legend里面的data可以删掉
},
// 网格配置 grid可以控制线形图 柱状图 图表大小
grid: {
left: '3%',
right: '4%',
bottom: '3%',
// 是否显示刻度标签 如果是true 就显示 否则反之
containLabel: true
},
// 工具箱组件 可以另存为图片等功能
toolbox: {
feature: {
saveAsImage: {}
}
},
// 设置x轴的相关配置
xAxis: {
type: 'category',
// 是否让我们的线条和坐标轴有缝隙
boundaryGap: false,
data: ['星期一', '周二', '周三', '周四', '周五', '周六', '周日']
},
// 设置y轴的相关配置
yAxis: {
type: 'value'
},
// 系列图表配置 它决定着显示那种类型的图表
series: [
{
name: '邮件营销',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210]
}
]
}
VisualizationData.png
地图的引入根据Echart社区的航线图完成
二、兼容Vue、webpack使用
- 安装vue-echarts
// 我使用的是
npm install echarts vue-echarts
// 也可以直接使用官方的
npm install echarts
- 导入和使用
<template>
<div class="hello">
<e-chart id="taskCompletionId" :options='taskCompletionRate' />
<!-- // 使用options放置echart配置-->
</div>
</template>
<script>
import ECharts from 'vue-echarts' // 局部引入
import 'echarts/lib/chart/bar' // 柱状图
import 'echarts/lib/chart/line' // 折线图
import 'echarts/lib/component/tooltip' // 提示框
export default {
name: 'TaskChart',
components: {
'e-chart': ECharts // 注册组件
},
data () {
return {
taskCompletionRate: null
}
},
created: function() {
this.taskCompletionRateShow()
},
methods: {
taskCompletionRateShow() {
this.taskCompletionRate = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow'
}
},
legend: {
data: ['合格任务', '不合格任务', '不合格率'] // 头部信息
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
// x轴和y轴的数据配置
yAxis: {
type: 'value'
},
xAxis: {
type: 'category',
data: ['2019年1月', '2019年2月', '2019年3月', '2019年4月']
},
series: [
{
name: '合格任务',
type: 'bar', // 图标模式（柱状、折线等）
stack: '总量', // 比例尺
color: '#ADD8E6', // 模块颜色
label: {
show: true,
position: 'insideRight'
},
data: [300, 302, 301, 334, 390, 330, 320]
},
{
name: '不合格任务',
type: 'bar',
stack: '总量',
color: '#FFA07A',
label: {
show: true,
position: 'insideRight'
},
data: [100, 132, 101, 134, 90, 230, 210]
},
{
name: '不合格率',
type: 'line',
stack: '总量',
label: {
show: true,
position: 'top', // 文字位置
formatter: '{c}%' // 显示百分比
},
data: [20, 18.2, 19, 24, 90, 30, 10]
}
]
}
}
}
}
vue-echarts.png
网友评论