一创建一个 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传统的数据展 ...

随机推荐

转：jsp与servlet的区别与联系
jsp与servlet的区别与联系 - gsyabc - 博客园https://www.cnblogs.com/sanyouge/p/7325656.html jsp和servlet的区别和联系:1. ...
2019年一次java知识点总结
java基础数据类型集合与数据结构关键字(static,rty ...) IO和网络多线程(并发与锁,死锁) 异常简单算法,复杂度 JVM 类加载 java内存模型对象监听器字节码垃圾回 ...
SSM增删改查
闲着无聊配置一遍SSM以及添加功能增删改查,如下图,其中坎坷也挺多!!! 1.工程如下图.(请忽略红叉,没有错误) 2.首先配置pom.xml文件. <project xmlns="h ...
解决python查询报%d format: a number is required, not str问题
文章链接:https://blog.csdn.net/u011878172/article/details/72599120 [问题描述] 1.在一条查询语句中,查询条件既包含了整形又包含了字符串型, ...
spring-mvc访问本地html文件
项目中要用到在线预览word文档,刚开始考虑是要将word转成pdf文件,然后再直接在浏览器打开pdf文档即可, 但是项目部署在Linux下,在网上搜了一下没有找到合适的方法, 后来项目组讨论用POI ...
springboot 多模块打war 部署
先展示一下自己项目结构一共有5个模块依赖关系:下面的模块依赖上面所有的模块其中 rongke-web是我要部署的模块最终要打war进行部署,其他模块均打jar 被rongke-web引用. 开 ...
西风 West Wind Html帮助构建器
https://helpbuilder.west-wind.com/ 示例文档: https://helpbuilder.west-wind.com/docs/_03101e5wp.htm
IntelliJ IDEA 2018.3.3配置 Tomcat 9，控制台出现中文乱码 “淇℃伅”（2019/01/25）
(win10系统) 全新idea配置全新版本Tomcat突遇 “淇℃伅”,网上大部分解决方案均已失效似乎是idea与Tomcat命令行输出格式不一致所致,千辛万苦在某一小角落发现这个方法,一针见血, ...
day23.面向对象之继承
1.什么是继承继承是一种创建新类的方式,在python中,新建的类可以继承一个或多个父类,父类又可称为基类或超类,新建的类称为派生类或子类 python中类的继承分为:单继承和多继承 class A ...
Selenium之Selenium IDE
官方文档:https://www.seleniumhq.org/docs/02_selenium_ide.jsp 1. Selenium IDE介绍 Selenium IED (Integ ...

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

代码为：

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

代码为：

3.创建一个chart.vue

代码为：

实现的效果为下：

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

随机推荐

热门专题