Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。
npm install highcharts --save
//可以根据实际需求来引入对应的包
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';
HighchartsMore(Highcharts)
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
Highmaps(Highcharts);
在template中设置容器的位置
<div id="container"></div>
在methods中封装一个moreChart方法。
moreChart() {
if (this.chart) {
this.chart.destroy();
}
// 初始化 Highcharts 图表
this.chart = new Highcharts.Chart("container", {
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() {
this.moreChart();
},
运行结果如下:
<template>
<div class="hello">
<div id="container"></div>
</div>
</template>
<script>
import Highcharts from "highcharts/highstock";
import HighchartsMore from "highcharts/highcharts-more";
import HighchartsDrilldown from "highcharts/modules/drilldown";
import Highcharts3D from "highcharts/highcharts-3d";
HighchartsMore(Highcharts);
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
export default {
name: "HelloWorld",
props: {
msg: String
},
mounted() {
this.moreChart();
},
methods: {
moreChart() {
if (this.chart) {
this.chart.destroy();
}
// 初始化 Highcharts 图表
this.chart = new Highcharts.Chart("container", {
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"
}
}
}
]
}
});
}
}
};
</script>
<!-- Add "scoped" attribute to limit css to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
大数据时代,收集和使用数据的需求正在爆发式增长,数据可视化也变得愈加重要。开发人员在想方设法将不同数据库中的记录整合到仪表板和漂亮的图表中,向人们快速直观地展示信息。在过去十年中数据可视化技术不断改进
在本文中,我们将为你介绍可以用来构建自己的图表制作工具以及向软件中增添一些图形建模功能的 10+ 款 JavaScript 库。如今在浏览器中,你可以使用 JavaScript 渲染任何东西
vue首先安装Highcharts相关依赖npm install highcharts,柱状图展示组件代码如图所示: piechart.vue;树状图中的点(矩形)的颜色是由和它同级的数据点的值来计算的。
第一次用makedown编辑器写文章,感觉像得到一件利器,排版美观而且效率飙升。进入正题;obama_budget数据里面的参数可以决定option里面需要用到的参数,可以直接在后端完整定义这个data
echarts-for-weixin是 ECharts 官方维护的一个开源项目,提供了一个微信小程序 组件 (Component),我们可以通过这个组件在微信小程序中使用 ECharts 绘制图表。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!