可视化图表（2D %26 3D）

• Echart.js 国内最火的图表库之一，由百度技术团队出品，内容丰富社区活跃，Echarts3 对性能进行了很好的提升和改进。
• AntV 蚂蚁可视化技术，类别丰富，拥有 G2、G6、F2、L7 等专业图标库，对图形的控制上要更自由，更抽象通用。
• Highcharts 内容丰富，支持 IE6 +、iPhone/iPad、Android 等目前市面上所有主流的浏览器，即开创性的支持 IE6 浏览器。
• D3.js D3 是最流行的可视化库之一，它被很多其他的表格插件所使用。功能拆得非常细，适合拿来学习的可视化算法。
• Chart.js 一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。

  其他问题

  数据可视化大屏 前端屏幕多分辨率适配方案(vue,echarts)
  https://www.jianshu.com/p/7e93043a6889

  Echart

  echarts
  http://echarts.apache.org/examples/zh/index.html#chart-type-pie

在vue中实现 echarts柱状图 Y轴渐变色
https://blog.csdn.net/Polarisone/article/details/89520622?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&dist_request_id=1328741.24989.16169058898860019&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control

code

import as echarts from ‘echarts’
Vue.prototype.$echarts = echarts
Vue.use(echarts)

Highcharts

Highcharts Vue
https://www.highcharts.com.cn/docs/highcharts-vue
在 Vue 中使用 Highcharts
https://blog.jianshukeji.com/highcharts/use-highcharts-with-vue.html
Highcharts基础教程（七）：图例（Legend）
https://www.evget.com/article/2016/7/15/24503.html

code

class=”chartbox”
ref=”chartProportion”
:options=”chartOptions”
:callback=”handleHighChartsCallback” />
import highcharts from ‘highcharts’
import { Chart } from ‘highcharts-vue’
import highcharts3d from ‘highcharts/highcharts-3d’
// import { loopTooltip } from ‘../../../utils/chartsAuto’
highcharts3d(highcharts)
name: ‘ChartProportion’,
components: {
highcharts: Chart
},
data () {
return {
chartOptions: {
chart: {
type: ‘pie’,
options3d: {
enabled: true,
alpha: 60, // 延y轴向内的倾斜角度
beta: 0 // 外旋转角度
},
backgroundColor: ‘rgba(0, 0, 0, 0)’
},
title: {
text: ‘’, // 图表的标题文字
floating: true
},
credits: {
enabled: false
},
tooltip: {
animation: true,
borderWidth: 0,
backgroundColor: ‘transparent’,
shadow: false,
followPointer: true,
pointFormat: ‘{series.name}{point.y}个‘,
style: {
color: ‘#fff’,
fontSize: 10 this.$store.state.common.scal
}
},
subtitle: {
text: ‘’//副标题文字
},
plotOptions: {
pie: {
allowPointSelect: true, // 每个扇块能否选中
cursor: ‘pointer’, // 鼠标指针
colors: [‘#25BD97’, ‘#EDCC31’, ‘#954CD8’, ‘#4B8EB1’, ‘#2451FF’],
size: ‘70%’,
depth: 30 this.$store.state.common.scal, // 饼图的厚度
dataLabels: {
enabled: true, // 是否显示饼图的线形tip
distance: -60 this.$store.state.common.scal,
format:’{point.y}%‘,
style: {
fontSize: 12 this.$store.state.common.scal / 2
}
},
showInLegend: true,
events: {
load: _function(e) {
var start = 1
setInterval(function() {
var data = JSON.parse(JSON.stringify(this.series[0].data))
data[start].sliced = false
if (start < this.series[0].data.length) {
start++
} else {
start = 1
}
data[start].sliced = true
this.series.setData(data)
this.chart.redraw()
}, 2000)
}
}
}
},
legend: {
layout: ‘vertical’,
align: ‘right’,
verticalAlign: ‘middle’,
itemStyle: {
‘color’: ‘#fff’,
‘fontSize’: 12 this.$store.state.common.scal / 2 + ‘px’
},
itemMarginTop: 4 this.$store.state.common.scal / 2,
symbolRadius: 0,
symbolWidth: 15 this.$store.state.common.scal / 2,
symbolHeight: 10 this.$store.state.common.scal / 2
},
series: [{
type: ‘pie’,
name: ‘疑情总数: ‘,//统一的前置词,非必须
innerSize: ‘42%’,
distance: -90 * this.$store.state.common.scal,
data: [{
name: ‘工位拒止’,
y: 31,
h: 80,
selected: true
},
[‘违规吸烟’,15],
[‘禁区管理’,18],
[‘视野遮挡’,8],
[‘明火作业’,28]
]
}]
},
timer: null,
timer2: null,
pageList: [{
name: ‘’,
h: 0
}],
cIndex: 0
}
},
// 添加数据
this.pageList = res.data.map(item => {
return {
name: item.dangerType,
y: parseInt(item.countScale),
h: item.dangerCount,
sliced: false
}
})
if (this.pageList.length == 0) {
this.pageList = [{
name: ‘工位拒止’,
y: parseInt(100.00),
h: 0,
sliced: false
}]
}
this.$refs.chartProportion.chart.series[0].setData(this.pageList)