echarts图库 https://www.isqqw.com/viewer?id=16125
y轴：
maxInterval:5, <!-- 刻度 -->
min:80, <!-- 从某数值开始 -->
max:130, <!-- 到某数值结束 -->
axisLine:{ <!-- y轴为实线 -->
show:true
},
折线图欲去除折线上原点
symbol:“none”,
y轴上文字竖着旋转90度且居中,文字距离y轴的距离
yAxis:[ {
name:“消费者信心指数”,
nameLocation:“center”,
nameGap:50,
折线图格子上写字
graphic: [
{
type:‘text’,
right: ‘15%’, //靠近右边y轴
top: ‘57%’, //距离头顶
z: 999,
style:{
text: ‘95%置信区间(平均值)’,
fontWeight: 400,
fontSize: 10
}
折线图加平均值线条
series里边加，后面接上数据即可
markLine:{
data:[{
type:‘average’
}]
},
折线图最高处加标识
markPoint:{
data:[
{ type:‘max’,name:‘最大值’},
{ type:‘min’,name:‘最小值’}
]
},
标题 title
title：{
text:“主标题”,
link:“网址或地址”,
target:“self”,
textStyle:{
color:‘颜色’,
fontSize:30
}
backgroundColor:‘pink’,
borderColor:‘red’,
borderWidth: 5,
x:‘center’,
subtext:‘副标题’,
sublink:‘’
}
x轴 xAxis:{
data:[‘横轴’,‘数据’]
}
数据 series:{
name:“名字”
type:“bar”
data:[1,2,3,5]
}
提示框 tooltip
作用：鼠标滑过，点击图表
tooltip:{
trigger:‘axis’,
axispointer:{
type:"line"<!-- 默认竖线 shadow阴影 cross十字准星 -->
},
showContent:false, <!-- 不展示提示框 默认true -->
bgC:"背景颜色",
borderColor:"边框色",
borderWidth:5, <!-- 边框粗细 -->
textStyle:{ <!-- 提示框内容字体颜色 -->
color:'pink'
},
<!-- 不足以开发，需要自定义内容formatter -->
formatter(params){ params是数据,下面遍历的是在data里定义过的对象
for(var i=0;i<params.length;i++){
return "名字："+params[i].name+"--价格:"+params[i].data.value+"--采摘日期："+params.data.date
}
}
}
图例 legend 标记啥是啥颜色
lengend:{
show:true,
icon:‘circle’,
top:‘10%’,
itemWidth:10,
itemHeight：20,
textStyle:{
color:‘red’,
fontSize:30,
backgroundColor:‘yellow’
},
}
柱状图 bar
创建一个路由组件，
记得 router/index.js 中 导入+注册 该路由组件,
路由组件内编写步骤：
template中给个盒子div
ref 以便后面获取dom $refs 来画图设置盒子的宽高边框线
#myCharts{
w500+h500;
border:1px soild red;
}
echarts包的下载和引入
下载
npm install echarts -S
+
main.js中引入
import echarts from ‘echarts’
Vue.prototype.$echarts = echarts
+
组件中引入
import * as echarts from “echarts”;
mounted中初始化echarts
更多效果（在上面的series的对象里加入）
markPoint:{
data:[
{
type:'max',
name:'最大值'
},
{
type:'min',
name:'最小值'
}
]
}
markLine:{
data:[
{
type:'average',
name:'平均值'
}
]
}
水平柱状图 柱状图躺着
只需要修改两个配置项
yAxis:{
data: xData,
type:‘category’
},
xAxis:{
type:‘value’
}
饼状图 pie
前三步
创建一个路由组件，
记得 router/index.js 中 导入+注册 该路由组件,
路由组件内编写步骤：
template中给个盒子div
ref 以便后面获取dom $refs 来画图设置盒子的宽高边框线
#myCharts{
w500+h500;
border:1px soild red;
}
echarts包的下载和引入
下载
npm install echarts -S
+
main.js中引入
import echarts from ‘echarts’
Vue.prototype.$echarts = echarts
+
组件中引入
import * as echarts from “echarts”;
mounted中初始化echarts
更多设置 （在上面的series的对象里加入）
radius:[ ‘40%’,‘70%’ ],
label:{
show:true,
position:’ ’
},
roseType:‘area’,
itemStyle:{
color:‘’,
shadowBlur:200,
shadowColor:‘green’
}
每一项的颜色
let data=[
{value:67,name:'美食',
itemStyle:{
normal:{ color:'' }
}
},
{value:175,name:'日化',
itemStyle:{
normal:{ color:'' }
}
},
{value:27,name:'数码',
itemStyle:{
normal:{ color:'' }
}
},
{value:89,name:'家电',
itemStyle:{
normal:{ color:'' }
}
}
]
折线图 line
前三步看上边
初始化ECharts
折线图更多设置 series里对象加
smooth:true
areaStyle:{}
markPoint:{
data:[
{type:‘max’,name:‘最大值’},
{type:‘mix’,name:‘最小值’},
]
},
markLine:{
data:[
{type:‘average’,name:‘平均值’}
]
}
多条折线图 堆叠折线图
上面的数据修改一下： 多来几条数据 series里清空
let aData=[130,25,234,164,89,188,79]
let bData=[166,48,200,160,95,175,80]
let cData=[178,66,240,175,84,200,55]
let dData=[154,45,250,185,95,195,94]
series:[
{
name:‘美食’,
type:‘line’,
stack:‘num’,
data:aData,
areaStyle:{},
emphasis:{
focus:‘series’
}
},
{
name:‘日化’,
type:‘line’,
stack:‘num’,
data:bData
},
{
name:‘数码’,
type:‘line’,
stack:‘num’,
data:cData
},
{
name:‘蔬菜’,
type:‘line’,
stack:‘num’,
data:dData
},
]
散点图 scatter
前三步看上边
初始化ECharts
散点图更多设置 series里的对象加
color:{
type:‘linear’,
x:0,
y:0,
x2:1,
y2:0,
colorStops:[
{
offset:0,
color:‘#00ccff’
},
{
offset:1,
color:‘rgba(255,173,2,.9)’
}
]
},
emphasis:{
itemStyle:{
borderColor:‘rgba(100,200,50,.5)’,
}
}
配置项grid
xAxis同级的属性
grid:{
show:true,
left:20%,
top:20%,
right:20%,
bottom:20%,
backgroundColor:‘pink’，
}
K线图 历史走势 趋势 candlestick
前三步一样
mounted中初始化echarts
更多设置
tooltip:{
trjgger:‘axis’,
axisPointer:{
type:‘cross’
}
},
itemStyle:{
color:‘red’,
color0:‘pink’,
borderColor:‘#8A0000’,
borderColor0:‘#008F28’,
},
markPoint:{
data:[
{
name:‘最大值’,
type:‘max’，
valueDim:‘highest’
},
{
name:‘最小值’,
type:‘min’,
valueDim:‘lowest’
},
{
name:‘平均值’,
type:‘average’,
valueDim:‘close’
}
]
}
series里新建一个对象
{
type:‘line’,
smooth:true,
data:this.newData
}
雷达图 radar
前三步一样
初始化ECharts
雷达图 更多设置
radius:320,
startAngle:180,
slitNumber:10,
axisName:{
formatter:‘{value}’,
color:‘#428BD4’
},
splitArea:{
areaStyle:{
color:[‘#77EADE’,‘#26C3BE’,‘#64afe9’,‘blue’]
shadowColor:‘0,0,0,.2’,
shadowBlur:10
}
}
lineStyle:{
type:‘dashed’
},
areaStyle:{
color:‘green’
}
漏斗图 funnel
前三步一样
let option = {
title:{
text’漏斗图’
},
tooltip:{
trigger:‘item’,
fromatter:‘{a}
{b}:{c}%’
},
series:[
{
type:‘funnel’,
data:[
{value:60,name:‘美食’}
{value:40,name:‘日化’}
{value:20,name:‘数码’}
{value:80,name:‘家电’}
{value:100,name:‘蔬菜’}
],
left:10%
}
]
}
漏斗图更多设置
series对象里
sofe:‘ascending’
itemStyle:{
borderColor:‘red’,
borderWidth:3,
},
label:{
show:true,
position:‘inside’
},
emphasis:{
label:{
fontSize:30
}
}
数据缩放 图表缩放series对象里
dataZoom: [
{ type: ‘slider’,
xAxisIndex: 0,
filterMode: ‘none’ <!-- 设置-----数据过滤不过滤数据，只改变数轴范围 -->
},
{
type: ‘slider’,
yAxisIndex: 0,
filterMode: ‘none’
},
]
主题设置
echarts中两个内置主题：light 浅蓝 dark 暗蓝色背景
设置主题：颜色，
let myChart = echarts.init(this.$refs.操作dom名 , “light”)
自定义主题 上面的主题不够用时 主题颜色
echarts官网导航栏 - 下载 - 主题下载 - 定制主题 - 设置自己的样式 - 下载主题 - 复制代码
步骤：
新建assets/tuStyle.js中
export let 主题名 = {
复制过来的主题代码
}
+
组件内引用+使用
import { 主题名 } from ‘@/assets/tuStyle.js’
let myChart = echarts.init(this.$refs.操作dom名 ,主题名)
地图设置
前三步看柱形图，下面是添加一些内容
https://datav.aliyun.com/portal/school/atlas/area_selector 阿里云中国地图下载
JSON API 复制链接到浏览器，里边的数据复制到assets/china.js
里边的内容 export let mapData = { 复制的数据 }
某省份地图
阿里云里中国地图点击省份 - 复制json api - 浏览器复制里边的内容
assets/省份.js
export let 省份名guangxi = 复制代码
在组件中导入和注册，在上一步的基础上删除zoom 和center
label:{
show:true,
fontSize:15
},
itemStyle:{
areaColor:‘pink’
}
地图气泡点 (geo同级)
series:
{
type:‘scatter’,
data:[
{
name:‘北京市’
value:[
116.46,
39.92,
4000
]
}
],
coordinateSystem:‘geo’,
symbolSize:30,
},
{
type:‘effectScater’,
coordinateSystem:‘geo’,
data:[
{
name:‘北京市’
value:[
108.95,
34.26
]
}
],
rippleEffect:{
number:2,
scale:4
},
itemStyle:{
color:‘red’
}
}
地图更多设置
itemStyle:{
areaColor:'#0099ff',
borderColor:'#00ffff',
shadowColor:'rgba(230,130,70,0.5)',
shadowBlur:30,
emphasis:{
focus:'self'
}
}
1424
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
