数据可视化
配置：
npm install echarts
npm install echarts --save
普通html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="js/echarts.min.js"></script>
<title>Document</title>
</head>
<body>
<!-- 创建一个div容器放置图表 -->
<div id="demo1" style="width: 600px; height: 400px"></div>
<!-- 绘制图表 -->
<script>
// 初始化图表实例
const myChart = echarts.init(document.getElementById("demo1"));
// 指定图表配置
const options = {
title: { text: "demo1" },//必须是一个对象
tooltip: {text:'demo'}, //提示框
legend: {
//数据标识
data: ["人数"],
},
// x轴标记
xAxis: {
data: ["vue", "react", "angular", "jquery"],
},
yAxis: {}, //默认显示数据
series: [
{
name: "人数", //标识
type: "bar", //折线图
data: [100, 200, 300, 400],
},
],
};
//设置图表实例配置
myChart.setOption(options);
</script>
</body>
</html>
<template>
<div id="app">
<div id="demo1" style="width:600px;height:400px"></div>
<button @click="changeOption">修改图表数据</button>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
name: 'App',
data(){
return {
// 指定图表配置
option : {
title: { text: "demo1" },
tooltip: {}, //提示框
legend: {
//数据标识
data: ["人数"],
},
// x轴标记
xAxis: {
data: ["vue", "react", "angular", "jquery"],
},
yAxis: {}, //默认显示数据
series: [
{
name: "人数", //标识
type: "bar", //折线图
data: [100, 200, 500, 400],
},
],
}
}
},
methods:{
changeOption(){
this.option= {
title: { text: "demo1" },
tooltip: { text: "demo" }, //提示框
legend: {
//数据标识
data: ["人数"],
},
// x轴标记
xAxis: {
data: ["vue", "react", "angular", "jquery"],
},
yAxis: {}, //默认显示数据
series: [
{
name: "人数", //标识
type: "bar", //折线图
data: [500, 100, 400, 800],
},
],
}
}
},
mounted:function(){
// 初始化图表实例
const myChart = echarts.init(document.getElementById("demo1"));
// // 指定图表配置
// const option = {
// title: { text: "demo1" },
// tooltip: { text: "demo" }, //提示框
// legend: {
// //数据标识
// data: ["人数"],
// },
// // x轴标记
// xAxis: {
// data: ["vue", "react", "angular", "jquery"],
// },
// yAxis: {}, //默认显示数据
// series: [
// {
// name: "人数", //标识
// type: "bar", //折线图
// data: [100, 200, 500, 400],
// },
// ],
// };
//设置图表实例配置
// myChart.setOption(option);
myChart.setOption(this.option);
},
watch:{
option:function(){
const myChart = echarts.init(document.getElementById("demo1"));
myChart.setOption(this.option);
}
}
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
数据可视化
http://localhost:8090//archives/shu-ju-ke-shi-hua