统计折线图-柱状图-饼图纯html-charts插件
第三方引入charts图表库,原生html、js、cs,在线生成数据图表
纯js方法组装数据,设置到图表模型,生成图表
可以在折线图-柱状图之间转换
可以将生成好的图表下载到本地
可以将此模块放置到Vue的项目里,可以兼容
在table表格内填写数据。刷新后自动生成图表
table表格可以增加行列,及增加tr、td标签
引入charts图表库
<script type="text/javascript" src="https://cdn.bootcss.com/echarts/4.7.0/echarts.min.js"></script>
准备一个可以放画布的div
<div align="center">
<div id="container" style="width: 80%;height:600px;"></div>
</div>
align="center" 的效果是图表居中
左侧的格度是自动增长的,不用管
蓝色的表格table内,可以任意输入值
自动生成图表,可下载
折线图与柱状图
<script>
var data = ["美国", "意大利", "中国", "西班牙", "德国", "法国", "伊朗"];
var ks = [
{
name: '累计',
type: 'line',
stack: '累计总量',
data: [820, 932, 901, 934, 1290, 1330, 1320]
},
{
name: '现有',
type: 'line',
stack: '现有总量',
data: [8120, 92, 9201, 1934, 1290, 3030, 120]
}
];
load(data, ks,'七日近况');
function load(data, ks,title) {
var myChart = echarts.init(document.getElementById('container'));
var option = {
title: {
text: title,
left:'center'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['近七日情况']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
}, //区域缩放,区域缩放还原
dataView: {
readOnly: false
}, //数据视图
magicType: {
type: ['line', 'bar']
}, //切换为折线图,切换为柱状图
restore: {}, //还原
saveAsImage: {} //保存为图片
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: data
},
yAxis: {
type: 'value'
},
series: ks
};
myChart.setOption(option, true);
}
</script>
饼图:
<script>
function loadPie() {
var data = [{
value: 335, name: '直接访问'
},
{
value: 310,
name: '邮件营销'
},
{
value: 234,
name: '联盟广告'
},
{
value: 135,
name: '视频广告'
},
{
value: 1548,
name: '搜索引擎'
}
];
var ks = ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'];
loadToPie(data, ks,'近七日情况');
}
function loadToPie(data, ks,title) {
var myChart = echarts.init(document.getElementById('container'));
var option = {
title: {
text: title,
left:'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
color: ['#93D8A9', '#FFB99D', '#AF7DCC', '#FFD83D', '#bbe2e8'],
legend: {
orient: 'horizontal',
x: 'left',
data: ks
},
series: [{
name: '占比',
type: 'pie',
radius: ['30%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: data
}]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
}
</script>