专栏首页前端之攻略引入highcharts主题

引入highcharts主题

如果把highcharts的主题放到自己的文件夹中方便修改,该怎么做呢?

新建一个主题的js文件

主题js的内容

import Highcharts from "highcharts/highcharts";
Highcharts.theme = {
    colors: ['red', '#95C471', '#35729E', '#251735',"green"],
    colorAxis: {
        maxColor: '#05426E',
        minColor: '#F3E796'
    },
    plotOptions: {
        map: {
            nullColor: '#FCFEFE'
        }
    },
    navigator: {
        maskFill: 'rgba(170, 205, 170, 0.5)',
        series: {
            color: '#95C471',
            lineColor: '#35729E'
        }
    }
};
// Apply the theme
Highcharts.setOptions(Highcharts.theme);

最后在main.js中引入即可

import Highchart from "highcharts/highcharts";
import HighchartsVue from "highcharts-vue";
import stockInit from "highcharts/modules/stock";
import '@/assets/js/highchartsTheme/shine.js'
stockInit(Highchart);
Vue.use(HighchartsVue);

然后直接使用

<template>
  <div>
    <highcharts :options="chartOptions" :callback="myCallback"></highcharts>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      chartOptions: {
        //会覆盖主题里面定义的颜色
        colors: ['black', '#95C471', '#35729E', '#251735',"green"],
        title: {
          text: "2010 ~ 2016 年太阳能行业就业人员发展情况"
        },
        subtitle: {
          text: "数据来源:thesolarfoundation.com"
        },
        yAxis: {
          title: {
            text: "就业人数"
          }
        },
        legend: {
          layout: "vertical",
          align: "right",
          verticalAlign: "middle"
        },
        plotOptions: {
          series: {
            label: {
              connectorAllowed: false
            },
            pointStart: 2010
          }
        },
        series: [
          {
            name: "安装,实施人员",
            data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
          },
          {
            name: "工人",
            data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
          },
          {
            name: "销售",
            data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
          },
          {
            name: "项目开发",
            data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
          },
          {
            name: "其他",
            data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
          }
        ],
        responsive: {
          rules: [
            {
              condition: {
                maxWidth: 500
              },
              chartOptions: {
                legend: {
                  layout: "horizontal",
                  align: "center",
                  verticalAlign: "bottom"
                }
              }
            }
          ]
        }
      }
    };
  },
  mounted() {
    // 修改chartOptions里面的数据,在这里后台请求接口,返回的数据重新赋值
  },
  methods: {
    myCallback() {
      console.log("this is callback function");
    }
  }
};
</script>

<style>
.highcharts-container {
  width: 600px;
  height: 400px;
  border: 1px solid #ddd;
  margin: auto;
}
</style>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • highcharts 极地图的应用

    引入 highcharts import HighCharts from "highcharts";

    tianyawhl
  • 路由原理 原

    官方路由:对于大多数单页面应用,都推荐使用官方支持的vue-router库,可能在使用vue-router的时候,我们并不了解其原理,官网也提供的一个完整的例子...

    tianyawhl
  • Lodop打印样式问题与解决方法 原

    1、<h3 class="printTitle">工商客户抄表收费通知单</h3> 标题,在打印预览时最后一个字会变小

    tianyawhl
  • DWR简介

    image.png DWR(Direct Web Remoting)是一个WEB远程调用框架.利用这个框架可以让AJAX开发变得很简单.利用DWR可以在客户...

    java达人
  • SAP ABAP CGLIB(Code Generation Library)的模拟实现

    A Byte Code Generation Library which is high level API to generate and transform...

    Jerry Wang
  • winform中linkLabel的用法(示例)

    private void Form1_Load(object sender, EventArgs e)         {             this...

    菩提树下的杨过
  • 密度散点图-colorbar

    在做精度对比的时候,密度散点图作用很大,特别的数据量大、精度高、相关系数高等情况出现的时候,很容易产生密集散点在聚集的热点,这个热点内的点数无法通过肉眼直观的了...

    一个有趣的灵魂W
  • 模式识别面临的挑战

    2017年11月25日,由模式识别国家重点实验室、中国自动化学会模式识别与机器智能专委会、中国人工智能学会模式识别专委会联合主办的模式识别与人工智能学科前沿研讨...

    企鹅号小编
  • Android自定义环形LoadingView效果

    最近项目有要用到环形的进度条,Github上有一个类似的DashedCircularProgress控件,但是他画的进度是通过设置画笔的虚线效果来实现间隔的:p...

    砸漏
  • 【Pyecharts可视化分享】杭州步行热门路线等~

    Awesome_Tang

扫码关注云+社区

领取腾讯云代金券