Vue3.0与Echarts5.0
一.什么是Echarts
Echarts–商业级数据图表，它是一个纯JavaScript的图标库，可以流畅的运行在PC和移动设备上，兼容 当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等，底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据 视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
二.Echarts特点
1、丰富的可视化类型: 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数 据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
2、多种数据格式无需转换直接使用: 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，此外还支持输入 TypedArray 格式的数据。
3、千万数据的前端展现: 通过增量渲染技术（4.0+），配合各种细致的优化，ECharts 能够展现千万级的数据量。
4、移动端优化: 针对移动端交互做了细致的优化，例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放（用鼠标滚轮）、平移等。
5、多渲染方案，跨平台使用: 支持以 Canvas、SVG（4.0+）、VML 的形式渲染图表。
6、深度的交互式数据探索: 提供了 图例、视觉映射、数据区域缩放、tooltip、数据刷选等开箱即用的交互组件，可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作。
7、多维数据的支持以及丰富的视觉编码手段: 对于传统的散点图等，传入的数据也可以是多个维度的。
8、动态数据: 数据的改变驱动图表展现的改变。
9、绚丽的特效: 针对线数据，点数据等地理数据的可视化提供了吸引眼球的特效。
三. Echarts初体验
1.echarts获取
前期准备
电脑上面安装node
node下载地址：http://nodejs.cn/
淘宝镜像（选按）
淘宝 NPM 镜像站自 2014 年 正式对外服务。于npm命令在国内下载速度很慢。所以淘宝每隔10分钟就会把npm服务器的内容拉取一次放在国内服务器 这样一来我们在下载依赖的时候 速度会快很多
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装
1.初始化 npm init -y
2.安装echarts依赖
npm install --save echarts
2.条形统计图
<template>
<div class="about">
<h1>This is an about page</h1>
<div id="main"></div>
</div>
</template>
<script>
import * as echarts from "echarts"; export default {
mounted() {
// echarts仅有一个方法init，执行init时传入一个具备大小
// （如果没有指定容器的大小将会按照0大小来处理即无法看到图表）的dom节点后即可实例化出图表对象，图表库实现为多实例的，
// 同一页面可多次init出多个图表。
var myChart = echarts.init(document.getElementById("main")); // 绘制图表 // setOption方法设置图表实例的配置项 以及数据 所有参数和数据的修改都可以通过 setOption 完成， ECharts 会合并新的参数和数据，然后刷新图表。
myChart.setOption({ title: {
//echarts标题
text: "ECharts 入门示例",
}, //tooltip:提示框组件，用于配置鼠标滑过或点击图表时的显示框。tooltip: {},
// 不过我们在使用Echarts过程中经常会遇到如下问题：图例经常不知道如何调节到我们想要的位
置。
legend: {}, //横坐标 xAxis配置 直角坐标系x轴
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {}, //系列（series）
// 系列（series）是很常见的名词。在 echarts 里，系列（series）是指：一组数值以及他们映射成的图。“系列”这个词原本可能来源于“一系列的数据”，而在 echarts 中取其扩展的概念，不仅表示数据，也表示数据映射成为的图
// charts 里系列类型（series.type）就是图表类型。系列类型（series.type）至少有：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图） series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
});
},
};
</script>
<style> #main{
width: 500px; height: 500px;
}
</style>
3. 配置项–title配置
title 标题组件，包含主标题和副标题。
<template>
<div class="about">
<h1>This is an about page</h1>
<div id="main"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
var myChart = echarts.init(document.getElementById("main"));
myChart.setOption({
title: {
show: true, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
text: "1主标题", //主标题文本，'\n'指定换行
// link:'http://www.baidu.com', //主标题文本超链接,默认值true
// target: "self", //指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
subtext: '副标题', //副标题文本，'\n'指定换行
// sublink: '', //副标题文本超链接
// subtarget: null, //指定窗口打开副标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
// x:'center', //水平安放位置，默认为'left'，可选为：'center' | 'left' |'right' | {number}（x坐标，单位px）
// y: 'bottom', //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
// backgroundColor: 'red', //标题背景颜色，默认'rgba(0,0,0,0)'透明
// borderWidth: 5, //标题边框线宽，单位px，默认为0（无边框）
// borderColor: '#ccffee', //标题边框颜色,默认'#ccc'
// padding: 5, //标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左
边距
// itemGap: 10, //主副标题纵向间隔，单位px，默认为10
// textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
// fontFamily: 'Arial, Verdana, sans...',
// fontSize: 12,
// fontStyle: 'normal',
// fontWeight: 'normal', // },
// subtextStyle: {//副标题文本样式{"color": "#aaa"}
// fontFamily: 'Arial, Verdana, sans...',
// fontSize: 12,
// fontStyle: 'normal',
// fontWeight: 'normal',
// },
// subtextStyle: {
// color: "#a1b2c3", // 副标题文字的颜色。
// fontStyle: "normal", // 副标题文字字体的风格。 'normal' 'italic''oblique'
// fontWeight: "bold", // 副标题文字字体的粗细。 'normal''bold''bolder' 'lighter' 500|600。
// fontSize: 18, // 字体大小
// lineHeight: "130", // 行高
// textBorderColor: "red", // 文字本身的描边颜色。
// textBorderWidth: 5, // 文字本身的描边宽度。
// textShadowColor: "transparent", // 文字本身的阴影颜色。
// textShadowBlur: 0, // 文字本身的阴影长度。
// textShadowOffsetX: 0, // 文字本身的阴影 X 偏移。
// textShadowOffsetY: 0, // 文字本身的阴影 Y 偏移。
// },
},
tooltip: {},
legend: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
});
},
};
</script>
<style>
#main {
width: 500px;
height: 500px;
}
</style>
4. 配置项–tooltip
提示框组件，用于配置鼠标滑过或点击图表时的显示框
<template>
<div class="about">
<h1>This is an about page</h1>
<div id="main"></div>
</div>
</template>
<script>
import * as echarts from "echarts"; export default {
mounted() {
var myChart = echarts.init(document.getElementById("main")); myChart.setOption({
title: {
text: '主标题'
},
tooltip: {//提示框组件，用于配置鼠标滑过或点击图表时的显示框。show: true, // 是否显示
trigger: 'axis', // 触发类型 'item'图形触发：散点图，饼图等无类目轴的图表中使用； 'axis'坐标轴触发；'none'：什么都不触发。
axisPointer: { // 坐标轴指示器配置项。
type: 'cross', // 'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器'cross' 十字准星指示器。
},
// showContent: true, //是否显示提示框浮层，默认显示。
// triggerOn: 'mouseover', // 触发时机'click'鼠标点击时触发。backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景颜色。borderColor: '#333', // 提示框浮层的边框颜色。
borderWidth: 0, // 提示框浮层的边框宽。padding: 5, // 提示框浮层内边距， textStyle: { // 提示框浮层的文本样式。
color: '#fff', fontStyle: 'normal', fontWeight: 'normal',
fontFamily: 'sans-serif', fontSize: 14,
},
// 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
// 模板变量有 {a}, {b}，{c}，分别表示系列名，数据名，数据值等
// formatter: '{a}--{b} 的成绩是 {c}'
formatter: function(arg) {
return arg[0].name + '的分数是:' + arg[0].data
}
},
legend: {}, xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {}, series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
});
},
};
</script>
<style> #main {
width: 500px; height: 500px;
}
</style>
5.配置项–legend
图例组件展现了不同系列的标记，颜色和名字。可以通过点击图例控制哪些系列不显示。
<template>
<div class="about">
<h1>This is an about page</h1>
<div id="main"></div>
</div>
</template>
<script>
import * as echarts from "echarts"; export default {
mounted() {
var myChart = echarts.init(document.getElementById("main")); myChart.setOption({
title: {
text: '主标题'
},
tooltip: {
},
legend: {
show: true, //是否显示icon: "circle",//图例样式
// top: "55%", // 组件离容器的距离
// bottom:"20%", // 组件离容器的距离
// left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'
// right: "5%",
// left:"10%" // // 组件离容器的距离
// padding: 5, // 图例内边距
// itemWidth: 6, // 图例标记的图形宽度。
// itemGap: 20, // 图例每项之间的间隔。
// itemHeight: 14, // 图例标记的图形高度。
// selectedMode: false, // 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。
inactiveColor: "#fffddd", // 图例关闭时的颜色。
textStyle: {//图例的公用文本样式。
// color: "#aabbcc", // 文字的颜色。
// fontStyle: "normal", // 文字字体的风格。'italic'
// fontWeight: "normal", // 文字字体的粗细。 'normal' 'bold' 'bolder' 'lighter' 100 | 200 | 300 | 400...
// fontFamily: "sans-serif", // 文字的字体系列。
// fontSize: 12, // 文字的字体大小。
// lineHeight: 20, // 行高。
// backgroundColor: "transparent", // 文字块背景色。
// borderColor: "transparent", // 文字块边框颜色。
// borderWidth: 0, // 文字块边框宽度。
// borderRadius: 0, // 文字块的圆角。
// padding: 0, // 文字块的内边距
// shadowColor: "transparent", // 文字块的背景阴影颜色
// shadowBlur: 0, // 文字块的背景阴影长度。
// shadowOffsetX: 0, // 文字块的背景阴影 X 偏移。
// shadowOffsetY: 0, // 文字块的背景阴影 Y 偏移。
// // width: 50, // 文字块的宽度。 默认
// // height: 40, // 文字块的高度 默认
// textBorderColor: "transparent", // 文字本身的描边颜色。
// textBorderWidth: 0, // 文字本身的描边宽度。
// textShadowColor: "transparent", // 文字本身的阴影颜色。
// textShadowBlur: 0, // 文字本身的阴影长度。
// textShadowOffsetX: 0, // 文字本身的阴影 X 偏移。
// textShadowOffsetY: 0, // 文字本身的阴影 Y 偏移。
}
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {}, series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
});
},
};
</script>
<style> #main {
width: 500px; height: 500px;
}
</style>
6.柱状图基本设置
柱状图：一种图表类型,因为构成是由一根一根类似柱子的数据条组合而成的坐标平面,所以命名为柱状 图。主要是用来反应对比数据之间的关系,也可以用来反应数据的变化趋势等等。
<template>
<div class="about">
<h1>This is an about page</h1>
<!-- 2.echarts根结点根容器如果我们没有去指定当前容器的大小 echarts会按照0来进行处理 -->
<div id="myecharts" ref="demoh"></div>
</div>
</template>
<script>
import * as echarts from "echarts"; export default {
mounted() {
let myChart = echarts.init(this.$refs.demoh);
let xData = ["美食", "数码", "日化", "蔬菜", "熟食"]; //x轴数据let yData = [88, 75, 20, 210, 35]; //y轴数据
let option = { xAxis: {
//配置x轴坐标参数
data: xData,
type: "category", //坐标轴类型。'value' 数值轴，适用于连续数据。
// 'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data
或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
// 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
// 'log' 对数轴。适用于对数数据。
},
yAxis: {
//配置y轴坐标参数
type: "value", //同x轴的参数
},
series: [
//系列 配置图表的类型
{
type: "bar",
name: "销量", //系列名称，用于提示框组件的显示， data: yData,
},
],
};
// 绘制图表 setOption 配置图表的配置项
myChart.setOption(option);
},
};
</script>
<style scoped> #myecharts {
width: 600px; height: 600px;
border: 2px solid red;
}
</style>
7.柱状图效果实现
当基本的柱状图设置完之后我们来看一下 柱状图的更多设置 柱状图标记效果最大值最小值平均值 通过markPoint进行设置
<template>
<div class="about">
<h1>This is an about page</h1>
<div id="myecharts" ref="demoh"></div>
</div>
</template>
<script>
import * as echarts from "echarts"; export default {
mounted() {
let myChart = echarts.init(this.$refs.demoh);
let xData = ["美食", "数码", "日化", "蔬菜", "熟食"]; //x轴数据let yData = [88, 75, 20, 210, 35]; //y轴数据
let option = { xAxis: {
//配置x轴坐标参数
data: xData,
type: "category", //坐标轴类型。'value' 数值轴，适用于连续数据。
// 'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data
或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
// 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
// 'log' 对数轴。适用于对数数据。
},
yAxis: {
//配置y轴坐标参数
type: "value", //同x轴的参数
},
series: [
//系列 配置图表的类型
{
type: "bar",
name: "销量", //系列名称，用于提示框组件的显示， data: yData,
///最大值最小值// markPoint: {
//图表标注。data: [
//标注的数据数组。每个数组项是一个对象
{
type: "max", //直接用 type 属性标注系列中的最大值，最小值。
name: "最大值",
},
{
type: "min",
name: "最小值",
},
],
},
///最大值最小值//
///平均值// markLine: {
//图表标线data: [
//标线的数据数组。
{
type: "average", name: "平均值",
},
],
},
///平均值//
},
],
};
// 绘制图表 setOption 配置图表的配置项
myChart.setOption(option);
},
};
</script>
<style scoped> #myecharts {
width: 600px; height: 600px;
border: 2px solid red;
}
</style>
8.柱状图效果实现2–xAxis，yAxis
水平柱状图通过设置xAxis yAxis中的type属性值来进行设置barWidth : xx,设置柱图宽度设置单独柱子的颜色
<template>
<div class="about">
<h1>This is an about page</h1>
<div id="myecharts" ref="demoh"></div>
</div>
</template>
<script>
import * as echarts from "echarts"; export default {
mounted() {
let myChart = echarts.init(this.$refs.demoh);
let xData = ["美食", "数码", "日化", "蔬菜", "熟食"]; //x轴数据let yData = [88, 75, 20, 210, 35]; //y轴数据
let option = { xAxis: {
type: "value", //数值轴
//坐标轴类型。'value' 数值轴，适用于连续数据。
// 'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data
或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
// 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
// 'log' 对数轴。适用于对数数据。
},
yAxis: { data: xData,
type: "category", //设置y为类目轴
},
series: [
{
type: "bar",
name: "销量", data: yData,
barWidth: 50, //设置宽度
// color:"red",//设置颜色
// 单独设置每个柱子的颜色
itemStyle: { normal: {
//每根柱子颜色设置
color: function (params) { let colorList = [
"#c23531", "#2f4554", "#61a0a8", "#d48265", "#91c7ae",
];
return colorList[params.dataIndex];
},
},
},
markPoint: { data: [
{
type: "max",
name: "最大值",
},
{
type: "min",
name: "最小值",
},
],
},
markLine: { data: [
{
type: "average", name: "平均值",
},
],
},
},
],
};
// 绘制图表 setOption 配置图表的配置项
myChart.setOption(option);
},
};
</script>
<style scoped> #myecharts {
width: 600px; height: 600px;
border: 2px solid red;
}
</style>
9.饼状图基本设置
饼状图是用整个圆表示总体的数量或整体值“1”，用圆内各个扇形的大小表示各部分数量或该部分占总体 的百分比。一般由标题（包括单位）、图例和数据等组成。
1.主要运用在对数据进行比较分析的时候，既可以表示绝对量，又可以表示相对量。
2.比柱形图等好在：数据更为清晰，各部分占总体的比重大小更为直观，可谓一目了然
<template>
<div ref="myChart" id="myChart"></div>
</template>
<script>
import * as echarts from "echarts" export default {
mounted(){
// 1.初始化
let myChart=echarts.init(this.$refs.myChart)
// 2.设置echarts数据let data=[
{ value: 67, name: '美食' },
{ value: 85, name: '日化' },
{ value: 45, name: '数码' },
{ value: 98, name: '家电' }
]
// 3.设置配置项let option={
title: { text: '饼状图',
subtext: '基本设置',
left: 'center'//设置位置居中
},
tooltip: {
trigger: 'item'//触发类型item数据项图形触发
},
legend: {
orient: 'vertical',//图例列表的布局朝向vertical纵向left: 'left'
},
series: [
{
name: '销售量',
type: 'pie',//饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比
例。
data
}
]
}
// 4.设置图表绘制图表myChart.setOption(option)
}
}
</script>
<style>
#myChart{
width: 500px; height: 500px;
border: 1px solid red;
}
</style>
10.饼状图效果实现
但是饼状图还有更多的效果环形图 样式等内容设置
<template>
<div ref="myChart" id="myChart"></div>
</template>
<script>
import * as echarts from "echarts" export default {
mounted(){
// 1.初始化
let myChart=echarts.init(this.$refs.myChart)
// 2.设置echarts数据
// let data=[
// { value: 67, name: '美食' },
// { value: 85, name: '日化' },
// { value: 45, name: '数码' },
// { value: 98, name: '家电' }
// ]
let data=[
{
value: 67, name: '美食', itemStyle:{
normal:{
color:'rgb(1,175,80)'
}
}
},
{
value: 85,
name: '日化', itemStyle:{
normal:{
color:'rgb(255,175,80)'
}
}
},
{
value: 45, name: '数码', itemStyle:{
normal:{
color:'rgb(1,0,80)'
}
}
},
{
value: 98, name: '家电', itemStyle:{
normal:{
color:'rgb(30,50,70)'
}
}
}
]
// 单独设置每个颜色
// 3.设置配置项let option={
title: {
text: ' 饼 状 图 ', subtext: '基本设置',
left: 'center'//设置位置居中
},
tooltip: {
trigger: 'item'//触发类型item数据项图形触发
},
legend: {
orient: 'vertical',//图例列表的布局朝向vertical纵向left: 'left'
},
series: [
{
name: '销售量',
type: 'pie',
// 设置环形图
radius: ['40%', '70%'],//饼图的半径。数组的第一项是内半径，第二项是外半径。
// 设置环形图
label: {//饼图图形上的文本标签show: true,
position:"inside",//outside饼图扇区外侧inside饼图扇区内部center在饼图中心位置color:"yellow"
},
labelLine: {//标签的视觉引导线配置show: false
},
roseType: 'area',//是否展示成南丁格尔图，通过半径区分数据大小itemStyle: {//设置内容样式
color: '#c23531', shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
data
}
]
}
// 4.设置图表绘制图表myChart.setOption(option)
}
}
</script>
<style> #myChart{
width: 500px; height: 500px;
border: 1px solid red;
}
</style>
11.折线图基本设置
折线图是用折线将各个数据点标志连接起来的图表，用于展现数据的变化趋势。
不仅可以表示数量的多少，而且可以反映同一事物在不同时间里的发展变化的情况。 易于显示数据变化趋势，可以直观地反映这种变化以及各组之间的差别。
<template>
<div ref="myChart" id="myChart"></div>
</template>
<script>
import * as echarts from "echarts" export default {
mounted(){
// 1.初始化
let myChart=echarts.init(this.$refs.myChart)
// 2.设置数据
let xData=['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] let data=[150, 230, 224, 218, 135, 147, 260]
// 3.设置配置项
let option = { xAxis: {
type: 'category', data: xData
},
yAxis: {
type: 'value'
},
series: [
{
data,
type: 'line'//设置系列为折线图
}
]
};
// 4.设置图表绘制图表myChart.setOption(option)
}
}
</script>
<style> #myChart{
width: 500px; height: 500px;
border: 1px solid red;
}
</style>
12.折线图效果实现
设置平滑过渡样式 并且可以对内容进行颜色的填充 加上对应的标记点
<template>
<div ref="myChart" id="myChart"></div>
</template>
<script>
import * as echarts from "echarts" export default {
mounted(){
// 1.初始化
let myChart=echarts.init(this.$refs.myChart)
// 2.设置数据
let xData=['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] let data=[150, 230, 224, 218, 135, 147, 260]
// 3.设置配置项
let option = { xAxis: {
type: 'category', data: xData
},
yAxis: {
type: 'value'
},
series: [
{
data,
type: 'line',//设置系列为折线图
smooth: true,//是否平滑曲线显示如果是 number 类型（取值范围 0 到 1），表示平滑程度， 越小表示越接近折线段，反之则反。设为 true 时相当于设为 0.5
areaStyle: {},//区域填充样式。设置后显示成区域面积图。markPoint: {//图表标注。
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' }
]
},
markLine: {//图表标线。
data: [{ type: 'average', name: 'Avg' }]
}
}
]
};
// 4.设置图表绘制图表myChart.setOption(option)
}
}
</script>
<style>
#myChart{
width: 500px; height: 500px;
border: 1px solid red;
}
</style>
13.折线图堆叠效果
设置多折折线效果
<template>
<div ref="myChart" id="myChart"></div>
</template>
<script>
import * as echarts from "echarts"; export default {
mounted() {
// 1.初始化
let myChart = echarts.init(this.$refs.myChart);
// 2.设置数据
let xData = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
// 3.设置配置项let option = {
xAxis: {
type: "category", data: xData,
},
yAxis: {
type: "value",
},
series: [
{
name: "美食",
type: "line",
stack: "num", //数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加。
data: [120, 132, 101, 134, 90, 230, 210],
areaStyle: {}, //区域填充样式。设置后显示成区域面积图。emphasis: {
//折线图的高亮状态。
focus: "series", //聚焦当前高亮的数据所在的系列的所有图形。
},
},
{
name: "日化",
type: "line",
stack: "num",
data: [220, 182, 191, 234, 290, 330, 310],
areaStyle: {}, //区域填充样式。设置后显示成区域面积图。emphasis: {
//折线图的高亮状态。
focus: "series", //聚焦当前高亮的数据所在的系列的所有图形。
},
},
{
name: "熟食",
type: "line",
stack: "num",
data: [150, 232, 201, 154, 190, 330, 410],
areaStyle: {}, //区域填充样式。设置后显示成区域面积图。emphasis: {
//折线图的高亮状态。
focus: "series", //聚焦当前高亮的数据所在的系列的所有图形。
},
},
],
};
// 4.设置图表绘制图表myChart.setOption(option);
},
};
</script>
<style>
#myChart {
width: 500px; height: 500px;
border: 1px solid red;
}
</style>
14.散点图基本效果设置
当存在大量数据点时，散点图的作用尤为明显。散点图与折线图相似，而不同之处在于折线图通过将点 或数据点相连来显示每一个变化。
<template>
<div ref="myChart" id="myChart"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
// 1.初始化
let myChart = echarts.init(this.$refs.myChart);
// 2.设置配置项
let option = {
xAxis: {},
yAxis: {},
series: [
{
symbolSize: 20,
data: [
[9.0, 7.04],
[18.07, 4.33],
[3.0, 9.65],
[9.05, 8.23],
[18.0, 9.76],
[15.0, 7.56],
[23.4, 5.31],
[10.1, 7.47],
[16.0, 8.26],
[12.7, 3.53],
[9.35, 7.2],
[7.4, 8.2],
[3.07, 4.82],
[18.2, 6.83],
[2.02, 4.47],
[1.05, 3.33],
[4.05, 4.96],
[6.03, 7.24],
[17.0, 6.55],
[12.0, 8.84],
[8.18, 5.82],
[6.32, 5.68],
],
type: "scatter",//散点图
},
],
};
// 3.设置图表绘制图表
myChart.setOption(option);
},
};
</script>
<style>
#myChart {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
15.散点图效果实现
<template>
<div ref="myChart" id="myChart"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
// 1.初始化
let myChart = echarts.init(this.$refs.myChart);
// 2.设置配置项
let option = {
xAxis: {},
yAxis: {
},
tooltip: {},//提示框组件
series: [
{
symbolSize: 20,
data: [
[9.0, 7.04],
[18.07, 4.33],
[3.0, 9.65],
[9.05, 8.23],
[18.0, 9.76],
[15.0, 7.56],
[23.4, 5.31],
[10.1, 7.47],
[16.0, 8.26],
[12.7, 3.53],
[9.35, 7.2],
[7.4, 8.2],
[3.07, 4.82],
[18.2, 6.83],
[2.02, 4.47],
[1.05, 3.33],
[4.05, 4.96],
[6.03, 7.24],
[17.0, 6.55],
[12.0, 8.84],
[8.18, 5.82],
[6.32, 5.68],
],
type: "scatter", //散点图
// 圆形样式
color: {//线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "#00CCFF", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(255, 173, 119, 1)", // 100% 处的颜色
},
],
globalCoord: true, // 如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
},
emphasis: {//高亮的图形和标签样式
itemStyle: {
borderColor: "rgba(102,205,46,0.30)",
borderWidth: 30,
},
},
},
],
};
// 3.设置图表绘制图表
myChart.setOption(option);
},
};
</script>
<style>
#myChart {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
16.配置项–grid
grid 为直角坐标系内绘图网格。可以在网格上绘制折线图，柱状图 散点图（气泡图）也就是设置图标离容器的距离 样式
<template>
<div class="about">
<!-- 2.echarts根结点根容器如果我们没有去指定当前容器的大小 echarts会按照0来进行处理 -->
<div id="myecharts" ref="demoh"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
let myChart = echarts.init(this.$refs.demoh);
let xData = ["美食", "数码", "日化", "蔬菜", "熟食"];
let yData = [88, 75, 20, 210, 35];
let option = {
xAxis: {
data: xData,
type: "category",
},
yAxis: {
type: "value",
},
// grid配置项：图标离容器的距离
// show:是否显示直角坐标系网格-----------值:true?false
// left:图表离容器左侧的距离-----------------值:number?百分比
// top:图表离容器顶部的距离-----------------值:number?百分比
// right:图表离容器右侧的距离---------------值:number?百分比
// bottom:图表离容器底部的距离------------值:number?百分比
// backgroundColor:网格背景色-------------值:rgba或#000000
// borderColor:网格的边框颜色--------------值:rgba或#000000
// borderWidth:网格的边框线宽-------------值:number
grid: {
show: true,
left: "5%",
top: "5%",
right: "5%",
bottom: "5%",
backgroundColor: "rgba(224, 17, 17, 1)",
borderColor: "rgba(96, 67, 67, 1)",
},
series: [
{
type: "bar",
name: "销量",
data: yData,
},
],
};
myChart.setOption(option);
},
};
</script>
<style scoped>
#myecharts {
width: 600px;
height: 600px;
border: 2px solid red;
}
</style>
