123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301 |
- /*大屏*/
- (function () {
- var chart1 = echarts.init(document.getElementById('ychart1'));
- var chart2 = echarts.init(document.getElementById('ychart2'));
- var chart3 = echarts.init(document.getElementById('ychart3'));
- var chart4 = echarts.init(document.getElementById('ychart4'));
- var data1 = [{
- name: "运行速度",
- value: 109,
- },
- {
- name: "单机效率",
- value: 109,
- },
- {
- name: "温度值",
- value: 109,
- },
- {
- name: "震动值",
- value: 109,
- }
- ];
- var colorTemplate1 = [
- [0.2, "#13dcea"],
- [0.8, "#13dcea"],
- [1, "#13dcea"]
- ];
- var option = [{
- series: [{
- name: "yuxingshudu",
- type: "gauge",
- radius: "100%",
- center: ["50%", "55%"],
- min: 0,
- max: 240,
- splitNumber: 8,
- axisLine: {
- show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
- lineStyle: {
- color: colorTemplate1,
- width: 6
- }
- },
- pointer: {
- width: 4
- },
- axisLabel: {
- show: true,
- distance: 4,
- color: "#0fa5b6",
- fontSize: 6,
- formatter: "{value}",
- },
- splitLine: { // 分隔线样式。
- show: true,
- length: 6,
- },
- itemStyle: {
- color: "#056094",
- opacity: 1,
- },
- title: { // 仪表盘标题。
- show: true,
- offsetCenter: [0,
- "80%"
- ],
- color: "#13dcea",
- fontSize: 12,
- },
- detail: {
- show: true,
- offsetCenter: [0,
- "40%"
- ],
- color: "auto",
- fontSize: 10,
- },
- data: [
- data1[0]
- ]
- }]
- },
- // biaopan2
- {
- series: [{
- name: "单机效率",
- type: "gauge",
- radius: "100%",
- center: ["50%", "55%"],
- min: 0,
- max: 240,
- splitNumber: 8,
- axisLine: {
- show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
- lineStyle: {
- color: colorTemplate1,
- width: 6
- }
- },
- pointer: {
- width: 4
- },
- axisLabel: {
- show: true,
- distance: 4,
- color: "#0fa5b6",
- fontSize: 6,
- formatter: "{value}",
- },
- splitLine: { // 分隔线样式。
- show: true,
- length: 6,
- },
- itemStyle: {
- color: "#056094",
- opacity: 1,
- },
- title: { // 仪表盘标题。
- show: true,
- offsetCenter: [0,
- "80%"
- ],
- color: "#13dcea",
- fontSize: 12,
- },
- detail: {
- show: true,
- offsetCenter: [0,
- "40%"
- ],
- color: "auto",
- fontSize: 10,
- },
- data: [
- data1[1]
- ]
- }]
- },
- // biao 3
- {
- series: [{
- name: "单机效率",
- type: "gauge",
- radius: "100%",
- center: ["50%", "55%"],
- min: 0,
- max: 240,
- splitNumber: 8,
- axisLine: {
- show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
- lineStyle: {
- color: colorTemplate1,
- width: 6
- }
- },
- pointer: {
- width: 4
- },
- axisLabel: {
- show: true,
- distance: 4,
- color: "#0fa5b6",
- fontSize: 6,
- formatter: "{value}",
- },
- splitLine: { // 分隔线样式。
- show: true,
- length: 6,
- },
- itemStyle: {
- color: "#056094",
- opacity: 1,
- },
- title: { // 仪表盘标题。
- show: true,
- offsetCenter: [0,
- "80%"
- ],
- color: "#13dcea",
- fontSize: 12,
- },
- detail: {
- show: true,
- offsetCenter: [0,
- "40%"
- ],
- color: "auto",
- fontSize: 10,
- },
- data: [
- data1[2]
- ]
- }]
- },
- // biao 4
- {
- series: [{
- name: "单机效率",
- type: "gauge",
- radius: "100%",
- center: ["50%", "55%"],
- min: 0,
- max: 240,
- splitNumber: 8,
- axisLine: {
- show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
- lineStyle: {
- color: colorTemplate1,
- width: 6
- }
- },
- pointer: {
- width: 4
- },
- axisLabel: {
- show: true,
- distance: 4,
- color: "#0fa5b6",
- fontSize: 6,
- formatter: "{value}",
- },
- splitLine: { // 分隔线样式。
- show: true,
- length: 6,
- },
- itemStyle: {
- color: "#056094",
- opacity: 1,
- },
- title: { // 仪表盘标题。
- show: true,
- offsetCenter: [0,
- "80%"
- ],
- color: "#13dcea",
- fontSize: 12,
- },
- detail: {
- show: true,
- offsetCenter: [0,
- "40%"
- ],
- color: "auto",
- fontSize: 10,
- },
- data: [
- data1[3]
- ]
- }]
- },
- ];
- // 使用刚指定的配置项和数据显示图表
- chart1.setOption(option[0])
- chart2.setOption(option[1])
- chart3.setOption(option[2])
- chart4.setOption(option[3])
- window.addEventListener('resize', function () {
- chart1.resize();
- chart2.resize();
- chart3.resize();
- chart4.resize();
- })
- })()
|