目录
Echarts--商业级数据图表
商业级数据图表,它是一个纯JavaScript的图标库,兼容绝大部分的浏览器,底层依赖轻量级的canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。Apache ECharts
Echarts支持的图表
折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)
雷达图(填充雷达图)、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表
Echarts的使用方法
一、首先在vue中下载echarts 命令:npm install echarts --save
二、在所在页面进行引用
代码块部分
<template>
<div class="contetn">
<div id="main" ref="chart" style="width: 100%; height: 400px"></div>
</div>
</template>
<script>
import * as echarts from "echarts"; //引用echarts
export default {
data() {
return {
myChart: "",
};
},
mounted() {
this.init();
var self = this;
window.onresize = self.myChart.resize;
window.addEventListener("resize", function() {
self.myChart.resize();
});
},
methods: {
init() {
this.myChart = echarts.init(this.$refs.chart);
var option = {
title: {
// text: "堆叠区域图",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
},
legend: {
data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
type: "category",
boundaryGap: false,
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
},
],
yAxis: [
{
type: "value",
},
],
series: [
{
name: "邮件营销",
type: "line",
stack: "总量",
areaStyle: {},
data: [120, 132, 101, 134, 90, 230, 210],
},
{
name: "联盟广告",
type: "line",
stack: "总量",
areaStyle: {},
data: [220, 182, 191, 234, 290, 330, 310],
},
{
name: "视频广告",
type: "line",
stack: "总量",
areaStyle: {},
data: [150, 232, 201, 154, 190, 330, 410],
},
{
name: "直接访问",
type: "line",
stack: "总量",
areaStyle: {},
data: [320, 332, 301, 334, 390, 330, 320],
},
{
name: "搜索引擎",
type: "line",
stack: "总量",
label: {
normal: {
show: true,
position: "top",
},
},
areaStyle: {},
data: [820, 932, 901, 934, 1290, 1330, 1320],
},
],
};
this.myChart.setOption(option);
},
},
};
</script>
效果图
后续(动图)
<template>
<div class="contetn">
<div id="main" ref="chart" style="height: 500px"></div>
</div>
</template>
<script>
import * as echarts from "echarts"; //引用echarts
export default {
data() {
return {
myChart: "",
};
},
mounted() {
this.init();
var self = this;
window.onresize = self.myChart.resize;
window.addEventListener("resize", function () {
self.myChart.resize();
});
},
methods: {
init() {
this.myChart = echarts.init(this.$refs.chart);
var option = {
backgroundColor: "#c4e0da",
xAxis: {
type: "category",
boundaryGap: false,
data: [
"一月份",
"二月份",
"三月份",
"四月份",
"五月份",
"六月份",
"七月份",
"八月份",
"九月份",
"十月份",
"十一月份",
"十二月份",
],
},
legend: {
data: ["2020", "2021", "2022"],
},
grid: {
left: ".5%",
right: "2%",
bottom: "5%",
containLabel: true,
},
yAxis: {
type: "value",
},
series: [
{
data: [100, 350, 400, 140, 710, 450, 200, 70, 20, 170, 10, 510],
name: "2020",
type: "bar",
smooth: true,
},
{
data: [100, 250, 500, 40, 10, 450, 20, 700, 200, 70, 40, 550],
name: "2021",
type: "pie",
smooth: true,
},
{
data: [100, 150, 600, 740, 710, 50, 210, 10, 100, 10, 110, 50],
name: "2022",
type: "line",
smooth: true,
},
],
};
var res = [
[500, 750, 200, 240, 710, 450, 200, 700, 200, 170, 410, 550],
[300, 100, 10, 20, 110, 50, 200, 70, 10, 10, 400, 510],
[100, 700, 280, 1240, 710, 1350, 1100, 1700, 400, 170, 140, 550],
[750, 1050, 5050, 4500, 500, 1500, 350, 250, 4000, 4100, 4050, 150],
[500, 800, 5500, 4050, 5050, 1050, 3500, 250, 400, 4100, 450, 1050],
[50, 150, 50, 450, 500, 500, 50, 20, 400, 100, 50, 150],
];
this.myChart.setOption(option);
setInterval(() => {
var i = parseInt(Math.random() * res.length);
console.log(i);
option.series[0].data = res[i];
option.series[1].data = res[i + 1];
option.series[2].data = res[i + 2];
this.myChart.setOption(option);
}, 800);
},
},
};
</script>