vue 使用echarts
Posted 苏格拉的底
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 使用echarts相关的知识，希望对你有一定的参考价值。
vue使用echarts的方法：https://www.freesion.com/article/99851407342/
<!--
THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=line-marker
-->
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-nightly@5.1.2-dev.20210512/dist/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
option = {
title: {
text: '用户注册与活跃统计'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['已注册用户数', '活跃用户数']
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1', '2', '3', '4', '5', '6', '7','8', '9', '10', '11', '12']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value}'
}
},
series: [
{
name: '已注册用户数',
type: 'line',
data: [100, 110, 103, 110, 120, 102, 90,103, 110, 120, 120, 90],
},
{
name: '活跃用户数',
type: 'line',
data: [1, -2, 2, 5, 3, 2, 0,1, -2, 2, 5, 3]
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
</script>
</body>
</html>
以上是关于vue 使用echarts的主要内容，如果未能解决你的问题，请参考以下文章
vue2+echarts：使用后台传输的json数据去动态渲染echarts图表