一创建一个 options.js

代码为：

export const option1 = {

bar: {

title: {

text: '珠海猪场' // 指定图表标题

credits: {

enabled: false

chart: {

backgroundColor: 'black',

type: 'bar'

plotOptions: {

column: {

colorByPoint: true

line: {

dataLabels: {

// 开启数据标签

enabled: true

}

// 关闭鼠标跟踪，对应的提示框、点击事件会失效

// enableMouseTracking: false

}

xAxis: {

categories: ['今日已入场', '已交易单次', '已交易数量', '已缴费'] // 指定x轴分组

series: [{

colorByPoint: true,

data: [500, 235, 809, 5000],

dataLabels: {

enabled: true

}

}]

}

export const option2 = {

bar: {

chart: {

backgroundColor: 'black',

type: 'column', // 指定图表的类型，默认是折线图（line）

enabled: true

credits: {

enabled: false

title: {

text: '珠海猪场' // 指定图表标题

colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#50B432', '#ED561B', '#DDDF00', '#24CBE5'],

xAxis: {

categories: ['今日已入场', '屠宰进度', '已交易单次', '分切进度', '已交易数量', '冷链车', '已交易额', '生产效率比', '已缴费'] // 指定x轴分组

yAxis: {

title: {

text: '最近七天' // 指定y轴的标题

credits: {

enabled: false

}

plotOptions: {

column: {

colorByPoint: true

// enabled: true

}

series: [

{ // 指定数据列

dataLabels: {

enabled: true

data: [

{

y: 1000,

color: 'red'

}, 5000, 4000, 5000, 2000, 5000, 4000, 5000, 2000], // 数据

enabled: true

}

]

}

export const option3 = {// id => 类似<div id="HighChartid"></div>

chart: {

backgroundColor: 'black',

plotBackgroundColor: null,

plotBorderWidth: null,

plotShadow: false

title: {

text: ''

tooltip: {

pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'

credits: {

enabled: false

plotOptions: {

credits: {

enabled: false

pie: {

allowPointSelect: true,

cursor: 'pointer',

dataLabels: {

enabled: true,

format: '{point.percentage:.1f} %',

style: {

color: 'black' // (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'

}

colors: [

'#21c393', // 不合格

'#4879df', // 合格

'#fad567', // 良好

'#f44a36' // 优秀

]

}

series: [{

type: 'pie',

data: [{

y: 61.41,

sliced: true,

selected: true

}, {

y: 11.84

}, {

y: 10.85

}, {

y: 4.67

}, {

y: 4.18

}, {

y: 1.64

}, {

y: 1.6

}, {

y: 1.2

}, {

y: 2.61

}] // 为要处理的格式，对应官网api的格式填写即可

}]

}

export const option4 = {

chart: {

backgroundColor: 'black',

plotBackgroundColor: null,

plotBorderWidth: null,

plotShadow: false,

type: 'pie',

height: 300

// 隐藏logo

credits: {

enabled: false

title: {

text: ' 珠海猪场大数据'

tooltip: {

pointFormat: '{series.name} : <b>{point.percentage:.1f}%</b>'

plotOptions: {

tooltip: {

valueSuffix: '%'

dataLabels: {

enabled: true,

format: '<b>{point.name}</b>: {point.percentage:.1f} %'

pie: {

allowPointSelect: true,

enabled: true,

cursor: 'pointer',

dataLabels: {

enabled: true,

format: '<b>{point.name}</b>: {point.percentage:.1f} %',

style: {

color: 'black'

}

showInLegend: true

}

series: [{

type: 'pie',

// enabled: true,

// allowPointSelect: true,

keys: ['name', 'y', 'selected', 'sliced'],

data: [

// ['Apples', 29.9, false],

// ['Pears', 71.5, false],

// ['Oranges', 106.4, false],

// ['Plums', 129.2, false],

['分切进度', 144.0, false],

['屠宰进度', 176.0, false],

['生产率', 135.6, true, true],

['已交易额', 148.5, false]

]

// enabled: true

}]

}

export const option5 = {

chart: {

backgroundColor: 'black',

type: 'line',

watch: 100,

height: 300

credits: {

enabled: false

title: {

text: '中珠牧业月销售'

subtitle: {

text: null

xAxis: {

categories: ['一日', '二日', '三日', '四日', '五日', '六日', '七日', '八日', '九日', '十日', '十一日', '十二日', '十三日', '十四日', '十五日', '十六日', '十七日', '十八日', '十九日', '二十日', '二十一日', '二十二日', '二十三日', '二十三日', '二十四日', '二十五日', '二十六日', '二十一七日', '二十八日', '二十九日', '三十日']

yAxis: {

title: {

text: '销售 (数量)'

}

plotOptions: {

line: {

dataLabels: {

// 开启数据标签

enabled: true

}

// 关闭鼠标跟踪，对应的提示框、点击事件会失效

}

series: [{

data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6, 7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6, 7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2]

}, {

data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8, 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8, 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0]

}]

}

export const option6 = {

chart: {

backgroundColor: 'black',

type: 'column'

credits: {

enabled: false

title: {

text: '猪场效率优化数据分析图',

color: 'MediumSpringGreen'

xAxis: {

categories: [

'前天数量',

'昨天数量',

'今天数量'

]

yAxis: [{

min: 0,

title: {

text: '入场猪与屠宰'

}

}, {

title: {

text: '已交易数利润'

opposite: true

}],

legend: {

shadow: false

tooltip: {

shared: true

plotOptions: {

column: {

grouping: false,

shadow: false,

borderWidth: 0

}

series: [{

color: 'rgba(165,170,217,1)',

data: [150, 73, 20],

pointPadding: 0.3, // 通过 pointPadding 和 pointPlacement 控制柱子位置

pointPlacement: -0.2

}, {

color: 'rgba(126,86,134,.9)',

data: [140, 90, 40],

pointPadding: 0.4,

pointPlacement: -0.2

}, {

color: 'rgba(248,161,63,1)',

data: [183.6, 178.8, 198.5],

tooltip: { // 为当前数据列指定特定的 tooltip 选项

valuePrefix: '$',

valueSuffix: ' M'

pointPadding: 0.3,

pointPlacement: 0.2,

yAxis: 1 // 指定数据列所在的 yAxis

}, {

color: 'rgba(186,60,61,.9)',

data: [203.6, 198.8, 208.5],

tooltip: {

valuePrefix: '$',

valueSuffix: ' M'

pointPadding: 0.4,

pointPlacement: 0.2,

yAxis: 1

}]

}

export const option7 = {

chart: {

marginTop: 40

title: {

text: '2017 年公司运营情况'

xAxis: {

categories: ['<span class="hc-cat-title">营收</span><br/> 千美元']

yAxis: {

plotBands: [{

from: 0,

to: 150,

color: '#666'

}, {

from: 150,

to: 225,

color: '#999'

}, {

from: 225,

to: 9e9,

color: '#bbb'

}],

title: null

series: [{

data: [{

y: 275,

target: 250

}]

}],

tooltip: {

pointFormat: '<b>{point.y}</b> （目标值 {point.target}）'

}

export const option8 = {

}

2.然后创建一个index.vue文件

代码为：

<div id="header" style="font-size:3.5vw; color: PowderBlue; text-align: center; padding-top:2vw;">中珠牧业生产实时测试系统

</div>

<div id="cc" style="font-size:1.7vw; color:#CDB38B; text-align: center;padding-top:1.5vw"><span>{{ now | dateformat('YYYY-MM-DD') }}</span><br>

<span style="font-size:1.5vw; color: #CDB38B; text-align: center;">{{ now | dateformat('HH:mm:ss') }}</span>

</div>

<tr>

</tr>

<tr>

</tr>

<tr>

<td style="font-size:1vw; color: PowderBlue;">今日交易额 :<span style="font-size:1.5vw; color: PowderBlue;">1000</span></td>

</tr>

</table>

</div>

<x-chart :id="test4" :option="option4" ></x-chart>

</div>

<div style="width:30vw; height:3vw; margin:1vw auto 0; font-size:1.5vw;text-align:center; color: PowderBlue; ">今日交易金额(元):<span style="font-size:2.5vw; ">10000</span></div>

</div>

<div style="margin:1vw auto 0; font-size:1.2vw;text-align:center; color: PowderBlue;">实时交易数</div>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</ul>

<div>

<x-chart :id="test1" ref="option1" :option="option1" ></x-chart>

</div>

<!-- <div style="margin-left:7vw;">

<el-progress title="这是紫色" type="circle" :percentage="data1" color="rgba(142, 113, 199, 0.7)"></el-progress>

<el-progress type="circle" :percentage="data2" color="rgba(140, 1001, 51, 0.7)"></el-progress>

</div> -->

<el-progress type="circle" :percentage="data4" color="rgba(43, 113, 19, 155)"></el-progress>

<el-progress type="circle" :percentage="data5" color="rgba(142, 11, 33, 0.7)"></el-progress>

</div>

</div>

<x-chart :id="test5" :option="option5" class="ff"></x-chart>

</div>

</template>

// 导入chart组件

import XChart from './chart.vue'

import HighCharts from 'highcharts'

import img_404 from '@/assets/bg.jpg'

import Highcharts from 'highcharts/highstock'

import HighchartsMore from 'highcharts/highcharts-more'

import HighchartsDrilldown from 'highcharts/modules/drilldown'

import Highcharts3D from 'highcharts/highcharts-3d'

import Highmaps from 'highcharts/modules/map'

import $ from 'jquery'

import HighchartsComponent from './HighchartsComponent.vue'

HighchartsMore(Highcharts)

HighchartsDrilldown(Highcharts)

Highcharts3D(Highcharts)

Highmaps(Highcharts)

// 导入chart组件模拟数据

import { option1, option2, option3, option4, option5, option6, option7, option8 } from '@/chart-options/options'

import { pay } from '@/api/car'

import moment from 'moment'

export default {

data() {

return {

chart: null,

img_404,

test1: 'test1',

test2: 'test2',

test3: 'test3',

test4: 'test4',

test5: 'test5',

test6: 'test6',

test7: 'test7',

option1: option1.bar,

option2: option2.bar,

option3: option3,

option4: option4,

option5: option5,

option6: option6,

option7: option7,

now: moment(),

data1: 0,

data2: 0,

data3: 0,

data4: 0,

data5: 0,

data6: 0,

data7: 0,

payMoney: null

}

components: {

XChart,

HighchartsComponent

filters: {

dateformat(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {

return moment(dataStr).format(pattern)

}

created() {

this.option1.series[0].data[0]

console.log(this.$refs.option1)

new HighCharts.Map('map', option8)

mounted() {

this.createChart()

this.highmaps()

setInterval(() => {

this.now = moment()

}, 100)

setInterval(() => {

if (this.data1 === 100) {

this.data1 = 0

}

if (this.data2 === 100) {

this.data2 = 0

}

if (this.data3 === 100) {

this.data3 = 0

}

if (this.data4 === 100) {

this.data4 = 0

}

if (this.data5 === 100) {

this.data5 = 0

}

if (this.option5 === 100) {

this.option5 = 0

}

this.data1 = Math.floor(Math.random() * 100)

this.data2 = Math.floor(Math.random() * 100)

this.data3 = Math.floor(Math.random() * 100)

this.data4 = Math.floor(Math.random() * 100)

this.data5 = Math.floor(Math.random() * 100)

this.option5 = Math.floor(Math.random() * 100)

pay().then((res) => {

this.payMoney = res.data

})

}, 1000)

methods: {

createChart() {

Highcharts.setOptions({

lang: {

rangeSelectorZoom: ''

}

})

highmaps() {

Highcharts.setOptions({

lang: {

drillUpText: '< 返回 "{series.name}"'

}

})

var map = null

var geochina = 'https://data.jianshukeji.com/jsonp?filename=geochina/'

$.getJSON(geochina + 'china.json&callback=?', function(mapdata) {

var data = []

// 随机数据

Highcharts.each(mapdata.features, function(md, index) {

var tmp = {

value: Math.floor((Math.random() * 100) + 1) // 生成 1 ~ 100 随机值

}

if (md.properties.drilldown) {

tmp.drilldown = md.properties.drilldown

}

data.push(tmp)

})

map = new Highcharts.Map('highmaps', {

chart: {

backgroundColor: 'black',

marginBottom: -0,

// borderWidth: 50,

plotBorderWidth: -0,

height: 430,

width: 800,

marginTop: 0,

// width: 1000,

// borderWidth: 1,

events: {

drilldown: function(e) {

console.log(e)

// 异步下钻

// if (e.point.drilldown) {

// var pointName = e.point.properties.fullname

// // 获取二级行政地区数据并更新图表

// $.getJSON(geochina + e.point.drilldown + '.json&callback=?', function(data) {

// data = Highcharts.geojson(data)

// Highcharts.each(data, function(d) {

// if (d.properties.drilldown) {

// d.drilldown = d.properties.drilldown

// }

// d.value = Math.floor((Math.random() * 100) + 1) // 生成 1 ~ 100 随机值

// })

// map.hideLoading()

// map.addSeriesAsDrilldown(e.point, {

// name: e.point.name,

// data: data,

// dataLabels: {

// enabled: true,

// format: '{point.name}'

// }

// })

// map.setTitle({

// text: pointName

// })

// }

drillup: function() {

map.setTitle({

text: '中国'

})

}

title: {

text: null

legend: {

// layout: 'vertical',

// align: 'right',

// verticalAlign: 'top',

// y: 50,

padding: 5

// itemMarginTop: 5,

// itemMarginBottom: 50,

// itemStyle: {

// lineHeight: '14px'

// }

credits: {

enabled: false

mapNavigation: {

// enabled: true,

buttonOptions: {

// 显示地图放大的标签+与-

// verticalAlign: 'bottom'

}

tooltip: {

useHTML: true,

headerFormat: '<table><tr><td>{point.name}</td></tr>',

pointFormat: '<tr><td>全称</td><td>{point.properties.fullname}</td></tr>' +

'<tr><td>行政编号</td><td>{point.properties.areacode}</td></tr>' +

'<tr><td>父级</td><td>{point.properties.parent}</td></tr>' +

'<tr><td>经纬度</td><td>{point.properties.longitude},{point.properties.latitude}</td></tr>',

footerFormat: '</table>'

// 这里时让地图更多的颜色也显示导航栏

// colorAxis: {

// min: 0,

// minColor: '#fff',

// maxColor: '#006cee',

// labels: {

// style: {

// 'color': 'red', 'fontWeight': 'bold'

// }

// },

series: [{

data: data,

mapData: mapdata,

joinBy: 'name',

states: {

hover: {

color: '#a4edba'

}

}]

})

}

</script>

<style>

.dsj{

width:100%;

height:100%;

background-color:#000000;

}

/*顶部面板样式*/

#header {

width:100%;

height:8vw;

}

/* 上中间右上边的DIV */

#cc{

width:16vw;

float:right;

margin: -7vw 1vw 0 0;

}

svg{

height:100% !important;

width:100% !important;

}

.define-table{

border-collapse:collapse;

border-spacing:0;

border-left:1px solid #888;

border-top:1px solid #888;

}

.define-table th,.define-table td{

border-right:1px solid #888;

border-bottom:1px solid #888;

padding:5px 15px;

}

.define-table th{

font-weight:bold;background:#ccc;

}

</style>

3.创建一个chart.vue

代码为：

</div>

</template>

import HighCharts from 'highcharts'

export default {

// 验证类型

props: {

id: {

type: String

option: {

type: Object

}

data() {

return {

chart: null

}

mounted() {

this.chart = HighCharts.chart(this.id, this.option)

}

</script>

实现的效果为下：

vue调用 Highcharts 实现多个数据可视化展示的更多相关文章

vue中Axios请求豆瓣API数据并展示到Swipe中
vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...
【PyQt5-Qt Designer】PyQt5+pyecharts 实现GUI界面的数据可视化展示
先用纯Python代码写一个简单的小案例: from PyQt5.QtCore import QUrl from PyQt5.QtWidgets import QApplication,QWidget ...
基于echarts 24种数据可视化展示，填充数据就可用，动手能力强的还可以DIY（演示地址+下载地址）
前言我们先跟随百度百科了解一下什么是"数据可视化 [1]". 数据可视化,是关于数据视觉表现形式的科学技术研究. 其中,这种数据的视觉表现形式被定义为,一种以某种概要形式抽提出来 ...
毕业论文着急了？Python疫情数据分析，并做数据可视化展示
采集流程一..明确需求采集/确诊人数/新增人数二.代码流程四大步骤发送请求获取数据网页源代码解析数据筛选一些我想用的数据保存数据保存成表格做数据可视化分析开始代码 1. 发送 ...
使用python对工作簿每个sheet表进行数据可视化展示（本案例是从第2个sheet开始循环读取也就是索引为1的表）
# 导入相关模块from pyecharts.charts import Barfrom pyecharts import options as optsfrom pyecharts.charts i ...
C#爬取京东手机数据+PowerBI数据可视化展示
此系列博文链接 C#爬虫基本知识 Html Agility Pack解析html TODO: EF6中基本认识. EF6操作mysql MySQL乱码问题 C#爬虫在开头贴一下github仓库地址, ...
python爬取拉勾网数据并进行数据可视化
爬取拉勾网关于python职位相关的数据信息,并将爬取的数据已csv各式存入文件,然后对csv文件相关字段的数据进行清洗,并对数据可视化展示,包括柱状图展示.直方图展示.词云展示等并根据可视化的数据做 ...
前端er必须掌握的数据可视化技术
又是一月结束,打工人准时准点的汇报工作如期和大家见面啦.提到汇报,必不可少的一部分就是数据的汇总.分析. 作为一名合格的社会人,我们每天都在工作.生活.学习中和数字打交道.小到量化的工作内容,大到具体 ...
中国移动能力开放商店OneNET View数据可视化公测 10分钟轻便生成行业可视化界面
随着云计算,5G技术,人工智能等底层技术的发展,万物互联时代已经到来,同时带来了海量数据,如何效果好.低成本.短时间的表现据,成为物联网行业从业者和公司的当务之急. OneNET View传统的数据展 ...

随机推荐

es集群数据库~运维相关
一数据同步方案 1 ES-JDBC 不能实现删除同步操作.MYSQL如果删除,ES不会删除 2 logstash-input-jdbc 能实现insert update,但是仍然不能实现删除 ...
C# - 设计模式 - 虚模式
虚模式问题场景子类从抽象派生是为了解耦,但为了适应新的变化,可能需要向抽象类添加新功能,假如在添加新功能之前已经有100个子类实现了抽象,那么接下来你得在100个子类中去重写向抽象添加的新功能. ...
selenium中webdriver识别class属性多个值中有空格的解决方案
初学自动化测试,貌似大家十有八九都是用百度网站进行练手的,特此感谢百度. http://www.baidu.com 页面中主要就是搜索框和提交按钮: 输入框各元素属性:<input id=&qu ...
emos邮件系统的web密码修改方法
作者:邓聪聪 1.修改web管理界面的登陆密码,数据库修改管理员密码,有root用root,没root用系统用户.查看方法进入数据库查看到管理表项中的root管理账户信息, mysql> u ...
面向对象之组合VS继承：继承过时了？
在阅读Effective Java中的第16条时发现了一个有趣的机制或者说是模式,那就是组合(文中翻译为复用,但是作者认为组合更能体现这种模式的精神),并且文中建议使用组合. 那什么是组合, ...
OpenStack--glance组件镜像服务
glance介绍 Glance 是 OpenStack 项目中负责镜像管理的模块,其功能包括虚拟机镜像的查找,注册和检索等.Glance 提供 Restful API 可以查询虚拟机镜像的 metad ...
马拉车算法——边界拓展时加限制hdu4513
#include<bits/stdc++.h> using namespace std; #define maxn 500005 int n,p[maxn],s[maxn],s_new[m ...
pip的安装问题
1. pip install 要不要加 sudo 不加sudo经常会遇到权限问题,如: $ pip install robotframeworklexer Collecting robotframew ...
[转]Example Design - Using the AXI DMA in polled mode to transfer data to memory
Description Attached to this Answer Record is an Example Design for using the AXI DMA in polled mode ...
tensorflow Tensorboard可视化-【老鱼学tensorflow】
tensorflow自带了可视化的工具:Tensorboard.有了这个可视化工具,可以让我们在调整各项参数时有了可视化的依据. 本次我们先用Tensorboard来可视化Tensorflow的结构. ...

vue调用 Highcharts 实现多个数据可视化展示

代码为：

2.然后创建一个index.vue文件

代码为：

3.创建一个chart.vue

代码为：

实现的效果为下：

vue调用 Highcharts 实现多个数据可视化展示的更多相关文章

随机推荐

热门专题