zoukankan      html  css  js  c++  java

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

    希望可以帮到你：欢迎关注，谢谢。

     

    1.创建一个options.js文件，下载Highcharts包 ：npm intall Highcharts      --sva:  代码如下：

    export const option1 = {
    bar: {
    title: {
    text: '珠海猪场' // 指定图表标题
    },
    chart: {
    backgroundColor: 'black',
    type: 'bar'
    },
    plotOptions: {
    line: {
    dataLabels: {
    // 开启数据标签
    enabled: true
    },
    // 关闭鼠标跟踪，对应的提示框、点击事件会失效
    enableMouseTracking: false
    }
    },
    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#50B432', '#ED561B', '#DDDF00', '#24CBE5'],
    xAxis: {
    categories: ['今日已入场', '屠宰进度', '已交易单次', '分切进度', '已交易数量', '冷链车', '已交易额', '生产效率比', '已缴费'] // 指定x轴分组
    },
    series: [{
    data: [50, 235, 809, 947, 50, 235, 809, 947, 420]
    }]
    }
    }
    export const option2 = {
    bar: {
    chart: {
    backgroundColor: 'black',
    type: 'column'// 指定图表的类型，默认是折线图（line）
    },
    credits: {
    enabled: false
    },
    title: {
    text: '珠海猪场' // 指定图表标题
    },
    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#50B432', '#ED561B', '#DDDF00', '#24CBE5'],
    xAxis: {
    categories: ['今日已入场', '屠宰进度', '已交易单次', '分切进度', '已交易数量', '冷链车', '已交易额', '生产效率比', '已缴费'] // 指定x轴分组
    },
    yAxis: {
    title: {
    text: '最近七天' // 指定y轴的标题
    }
    },
    plotOptions: {
    column: {
    colorByPoint: true
    }
    },
    series: [
    { // 指定数据列
    name: '珠海猪场信息',
    data: [
    {
    y: 1000,
    color: 'red'
    }, 5000, 4000, 5000, 2000, 5000, 4000, 5000, 2000] // 数据
    }
    ]
    }
    }

    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: {
    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',
    name: '售数量',
    data: [{
    name: ' 今日已入场',
    y: 61.41,
    sliced: true,
    selected: true
    }, {
    name: ' 屠宰进度',
    y: 11.84
    }, {
    name: '已交易单次',
    y: 10.85
    }, {
    name: '分切进度',
    y: 4.67
    }, {
    name: '已交易数量',
    y: 4.18
    }, {
    name: '冷链车',
    y: 1.64
    }, {
    name: '已交易额',
    y: 1.6
    }, {
    name: '生产效率比',
    y: 1.2
    }, {
    name: '已缴费',
    y: 2.61
    }] // 为要处理的格式，对应官网api的格式填写即可
    }]
    }

    export const option4 = {
    chart: {
    backgroundColor: 'black',
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie'
    },
    title: {
    text: ' 珠海猪场大数据'
    },
    tooltip: {
    pointFormat: '{series.name} : <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
    pie: {
    allowPointSelect: true,
    cursor: 'pointer',
    dataLabels: {
    enabled: false
    },
    showInLegend: true
    }
    },
    series: [{
    name: '销售量',
    colorByPoint: true,
    data: [{
    name: '屠宰进度',
    y: 61.41,
    sliced: true,
    selected: true
    }, {
    name: '已交易单次',
    y: 11.84
    }, {
    name: '分切进度',
    y: 10.85
    }, {
    name: '已交易数量',
    y: 4.67
    }, {
    name: '冷链车',
    y: 4.18
    }, {
    name: '已交易额',
    y: 7.05
    }, {
    name: '生产效率比',
    y: 7.05
    }, {
    name: '已缴费',
    y: 7.05
    }]
    }]
    }

    export const option5 = {
    chart: {
    backgroundColor: 'black',
    type: 'line'
    },
    title: {
    text: '次日销售'
    },
    subtitle: {
    text: ' 珠海猪场销售数据'
    },
    xAxis: {
    categories: ['一日', '二日', '三日', '四日', '五日', '六日', '七日', '八日', '九日', '十日', '十一日', '十二日', '十三日', '十四日', '十五日', '十六日', '十七日', '十八日', '十九日', '二十日', '二十一日', '二十二日', '二十三日', '二十三日', '二十四日', '二十五日', '二十六日', '二十一七日', '二十八日', '二十九日', '三十日']
    },
    yAxis: {
    title: {
    text: '销售 (数量)'
    }
    },
    plotOptions: {
    line: {
    dataLabels: {
    // 开启数据标签
    enabled: true
    }
    // 关闭鼠标跟踪，对应的提示框、点击事件会失效
    }
    },
    series: [{
    name: '今日已入场',
    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]
    }, {
    name: '屠宰进度',
    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]
    }, {
    name: '已交易单次',

    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]
    }, {
    name: '分切进度',
    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]
    }, {
    name: '已交易数量',
    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]
    }, {
    name: '冷链车',
    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]
    }, {
    name: '已交易额',
    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]
    }, {
    name: '生产效率比',
    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]
    }, {
    name: '已缴费',
    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'
    },
    title: {
    text: '分公司效率优化嵌套图'
    },
    xAxis: {
    categories: [
    '杭州总部',
    '上海分部',
    '北京分部'
    ]
    },
    yAxis: [{
    min: 0,
    title: {
    text: '雇员'
    }
    }, {
    title: {
    text: '利润 (millions)'
    },
    opposite: true
    }],
    legend: {
    shadow: false
    },
    tooltip: {
    shared: true
    },
    plotOptions: {
    column: {
    grouping: false,
    shadow: false,
    borderWidth: 0
    }
    },
    series: [{
    name: '今日已入场',
    color: 'rgba(165,170,217,1)',
    data: [183.6, 178.8, 198.5],
    tooltip: { // 为当前数据列指定特定的 tooltip 选项
    // valuePrefix: '$',
    valueSuffix: ' 次'
    },
    pointPadding: 0.3,
    pointPlacement: 0.2,
    yAxis: 1 // 指定数据列所在的 yAxis
    }, {
    name: '屠宰进度',
    color: 'rgba(126,86,134,.9)',
    data: [183.6, 178.8, 198.5],
    tooltip: { // 为当前数据列指定特定的 tooltip 选项
    // valuePrefix: '$',
    valueSuffix: ' 头'
    },
    pointPadding: 0.3,
    pointPlacement: 0.2,
    yAxis: 1 // 指定数据列所在的 yAxis
    }, {
    name: '已交易单次',
    color: ' rosybrown',
    data: [183.6, 178.8, 198.5],
    tooltip: { // 为当前数据列指定特定的 tooltip 选项
    // valuePrefix: '$',
    valueSuffix: ' 次'
    },
    pointPadding: 0.3,
    pointPlacement: 0.2,
    yAxis: 1 // 指定数据列所在的 yAxis
    }, {
    name: '分切进度',
    color: 'rgba(186,60,61,.9)',
    data: [203.6, 198.8, 208.5],
    tooltip: {
    valuePrefix: '$',
    valueSuffix: ' 个'
    },
    pointPadding: 0.4,
    pointPlacement: 0.2,
    yAxis: 1
    }, {
    name: '已交易数量',
    color: 'rgba(248,11,63,1)',
    data: [153.6, 138.8, 102.5],
    tooltip: { // 为当前数据列指定特定的 tooltip 选项
    valuePrefix: '$',
    valueSuffix: ' 个'
    },
    pointPadding: 0.3,
    pointPlacement: 0.2,
    yAxis: 1 // 指定数据列所在的 yAxis
    }, {
    name: '冷链车',
    color: ' cadetblue',
    data: [163.6, 138.8, 198.5],
    tooltip: { // 为当前数据列指定特定的 tooltip 选项
    // valuePrefix: '$',
    valueSuffix: ' 辆'
    },
    pointPadding: 0.3,
    pointPlacement: 0.2,
    yAxis: 1 // 指定数据列所在的 yAxis
    }, {
    name: '已交易额',
    color: 'rgba(28,161,3,1)',
    data: [103.6, 138.8, 118.5],
    tooltip: { // 为当前数据列指定特定的 tooltip 选项
    valuePrefix: '$',
    valueSuffix: ' 元'
    },
    pointPadding: 0.3,
    pointPlacement: 0.2,
    yAxis: 1 // 指定数据列所在的 yAxis
    }, {
    name: '生产效率比',
    color: 'rgba(28,11,63,133)',
    data: [153.6, 158.8, 108.5],
    tooltip: { // 为当前数据列指定特定的 tooltip 选项
    // valuePrefix: '',
    valueSuffix: ' %'
    },
    pointPadding: 0.3,
    pointPlacement: 0.2,
    yAxis: 1 // 指定数据列所在的 yAxis
    }, {
    name: '已缴费',
    color: ' #FFCC66',
    data: [113.6, 118.8, 108.5],
    tooltip: { // 为当前数据列指定特定的 tooltip 选项
    valuePrefix: '$',
    valueSuffix: ' 元'
    },
    pointPadding: 0.3,
    pointPlacement: 0.2,
    yAxis: 1 // 指定数据列所在的 yAxis
    }]
    }

    2.创建一个vue的文件，一个是路径指名

    App.vue文件： 代码如下

    <template>
    <div style="backgroundColor: black;">
     
    <div>
    <div style=" 40%; float: left">

    <el-card class="box-card" style="margin: 50px; backgroundColor: black; color: PaleTurquoise;">
    <div slot="header" class="clearfix">
    <span style="font-size: 36px; color: PowderBlue; ">珠海猪场数据展视&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>{{ now | dateformat('YYYY-MM-DD HH:mm:ss') }}</span></span>
    <el-button style="float: right; padding: 3px 0" type="text"></el-button>
    </div>

    <div style="font-size: 26px; color: LightGoldenrodYellow;">
    <p>今日已入场&nbsp;&nbsp;:<span id="">&nbsp;&nbsp;&nbsp;1000</span></p>
    <p>已交易单次&nbsp;&nbsp;:<span id="">&nbsp;&nbsp;&nbsp;600</span></p>
    <p>已交易数量&nbsp;&nbsp;:<span id="">&nbsp;&nbsp;&nbsp;500</span></p>
    <p>生产效率比&nbsp;&nbsp;:<span id="">&nbsp;&nbsp;&nbsp;50%</span></p>
    <p>分&nbsp;切&nbsp;进&nbsp;度&nbsp;&nbsp;:<span id="">&nbsp;&nbsp;&nbsp;30%</span></p>
    <p>屠&nbsp;宰&nbsp;进&nbsp;度&nbsp;&nbsp;:<span id="">&nbsp;&nbsp;&nbsp;50%</span></p>
    <p>已&nbsp;交&nbsp;易&nbsp;额&nbsp;&nbsp;:<span id="">&nbsp;&nbsp;&nbsp;60%</span></p>
    <p>冷&nbsp;&nbsp;&nbsp;链&nbsp;&nbsp;&nbsp;车&nbsp;&nbsp;:<span class=1000>&nbsp;&nbsp;&nbsp;1000辆</span></p>
    <p>已&nbsp;&nbsp;&nbsp;激&nbsp;&nbsp;&nbsp;费&nbsp;&nbsp;:<span></span>&nbsp;&nbsp;&nbsp;10000元</p>
    </div>
    </el-card>

    </div>

    <div style="widht:60%; float: right;">

    <div>
    <x-chart :id="test2" :option="option2" class="aa"></x-chart>

    <x-chart :id="test6" :option="option6" class="bb"></x-chart>
    </div>

    <div style="clear: both"></div>
     
    <div style="margin-top:80px;">
    <!-- <x-chart :id="test3" :option="option3" class="cc"></x-chart> -->
    <x-chart :id="test4" :option="option4" class="dd"></x-chart>

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

    <div style="clear: both;"></div>

    </div>

    </div>

    <div style="clear: both;"></div>

    <div style="margin-top:90px;">
    <x-chart :id="test5" :option="option5" class="ff"></x-chart>
    </div>
    </div>
    </template>
    <script>
    // 导入chart组件
    import XChart from './chart.vue'
    // 导入chart组件模拟数据
    import { option1, option2, option3, option4, option5, option6 } from '@/chart-options/options'
    import moment from 'moment'
    export default {
    name: 'app',
    data() {
    return {
    test1: 'test1',
    test2: 'test2',
    test3: 'test3',
    test4: 'test4',
    test5: 'test5',
    test6: 'test6',
    option1: option1.bar,
    option2: option2.bar,
    option3: option3,
    option4: option4,
    option5: option5,
    option6: option6,
    now: moment()
    }
    },
    components: {
    XChart
    },
    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)
    },
    mounted() {
    setInterval(() => {
    this.now = moment()
    }, 1000)
    },
    methods: {

    }
    }
    </script>
     
    <style>
    .aa, .bb, .dd, .ee {
    500px;
    height: 300px;
    float: right;
    margin-left: 90px;
    }
    </style>
     

    chart.vue文件代码如下

    <template>
    <div class="x-bar">
    <div :id="id" :option="option"></div>
    </div>
    </template>
    <script>
    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>
     
     
    4.实现的效果如下：
  • 相关阅读:
    在线制作流程图
    表格设计有感
    mvp需要加上单利模式
    2015.7.17( NOI2015 day1 )
    BZOJ 2073: [POI2004]PRZ( 状压dp )
    1688: [Usaco2005 Open]Disease Manangement 疾病管理( 枚举 )
    BZOJ 1072: [SCOI2007]排列perm( )
    BZOJ 1475: 方格取数( 网络流 )
    BZOJ 3524: [Poi2014]Couriers( 主席树 )
    BZOJ 1087: [SCOI2005]互不侵犯King( 状压dp )
  • 原文地址：https://www.cnblogs.com/zengxiangcai/p/9334524.html
Copyright © 2011-2022 走看看