名词解释
chart:
是指一个完整的图表,如折线图,饼图等“基本”图表类型或由基本图表组合而成的“混搭”图表,可能包括坐标轴、图例等
axis
直角坐标系中的一个坐标轴,坐标轴可分为类目型、数值型或时间型
xAxis
直角坐标系中的横轴,通常并默认为类目型
yAxis
直角坐标系中的纵轴,通常并默认为数值型
legend
图例,表述数据和图形的关联
toolbox
辅助工具箱,辅助功能,如添加标线,框选缩放等
tooltip
气泡提示框,常用于展现更详细的数据
series
数据系列,一个图表可能包含多个系列,每一个系列可能包含多个数据
line
折线图,堆积折线图,区域图,堆积区域图。
bar
柱形图(纵向),堆积柱形图,条形图(横向),堆积条形图。
pie
饼图,圆环图。饼图支持两种(半径、面积)南丁格尔玫瑰图模式。
实例展示
如果单独在html页面写,则可以参考如下代码:
记得引入echarts.min.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#container{
width: 800px;
height: 600px;
}
</style>
<body>
<div id="container">
</div>
<script src="../js/purple-passion.js"></script>
<script src="../js/echarts.min.js"></script>
<script>
// 01 修改主题,dark light 自定义
// 02 修改调色盘
// 初始化echart实例
var echart=echarts.init(document.getElementById("container"),'purple-passion')
// 定义选项
var option= {
// color调色盘,可局部,可全局
// color:["#8a7ca8","#e098c7","#cceffa"],
// 标题
title:{text:"前端大讲堂"},
// 鼠标提示
tooltip:{},
// 图例
legend:{data:["人数","人气","年龄分布"]},
// x轴线
xAxis:{data:["12-1","12-2","12-3","12-4","12-5","12-6"]},
// y轴线
yAxis:{},
// 系列数据
series:[
// 名称name,类型:柱状图,数据data,areaStyle:{color:#F70} 面积区域
{name:"人数",type:"bar",data:[100,500,600,1000,500,900]},
{name:"人气",type:"line",smooth:true,data:[60,300,400,800,100,700]},
{name:"年龄分布",type:"pie",radius:["20%","40%"],left:"70%",top:"-80%",
data:[
{name:"青年",value:36},
{name:"中年",value:27},
{name:"老年",value:18},
{name:"少年",value:32},
]}
]
}
// 设置参数
echart.setOption(option)
</script>
</body>
</html>
如果你想在vue里引用echarts,按照如下几步即可:
1.通过 npm 命令在自己的项目目录下安装 ECharts
npm install echarts --save
2.在main.js里引入
// 引入echarts
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts
3.文件初始化,重点,圈住的部分是vue区别于在html里写echarts的不同
var echart = this.$echarts.init(document.getElementById("container"), "dark");
<template>
<div id="container"></div>
</template>
<style scoped>
#container {
width: 800px;
height: 600px;
}
</style>
<script>
export default {
data() {
return {};
},
methods: {
first() {
var echart = this.$echarts.init(
document.getElementById("container"),
"dark"
);
var option = {
title: { text: "人气" },
tooltip: {},
legend: { data: ["人数"] },
xAxis: {
type: "category",
data: ["12-1", "12-2", "12-3", "12-4", "12-5"]
},
yAxis: {},
// 系列数据
series:[
// name 名称,类型,柱状图,数据data
{name:"人数",type:"bar",data:[100,80,120,60,130]}
]
};
echart.setOption(option);
}
},
mounted() {
this.first();
}
};
</script>