echart 详细配置(vue脚手架)
通用配置
<template>
<div>
<div ref="main" style="width: 100%;height:400px;"></div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'AskFor',
mounted () {
var myChart = echarts.init(this.$refs.main)
let sizeFun = function () {
myChart.resize()
}
window.addEventListener('resize', sizeFun )
//通用配置为任何一个图标类型都可以使用的配置
// 标题: title 提示: tooltip 工具按钮: toolbox 图列: legend
//工具按钮: toolbox 内置有导入图片,数据视图,动态类型切换,数据区域缩放,重置五个工具
//图列: legend 筛选系列, 配合series配合,legend中的data的值需要和series数组中的某组数据的name保持一致
var option = {
//标题
title: {
text: '这是一个标题',
textStyle: { //样式
color: '#ff0600',
fontWeight: 'bolder',
fontSize: 16
},
left: '10%', //标题位置
subtext: '这是副文本标题'
},
//提示
tooltip: {
trigger: 'item', //触发的类型 item移入触发
triggerOn: 'mousemove', //触发时机 mousemove移入触发 click点击触发
formatter: `{a}-{b}:{c}` //formatter决定了提示的内容
// formatter: `{b}的数据是{c}` //formatter决定了提示的内容
// formatter: function(arg) {
// return arg.name +'的数据是'+arg.value //尽量使用click触发
// }
},
//图列
legend: {
data: ['语文','数学']
},
//工具按钮
toolbox: {
feature: {
saveAsImage: {}, //导出图片
dataView: {}, //数据视图
restore: {}, //重置还原
dataZoom: {}, //区域缩放
magicType: { //在哪些图标类型之间切换,动态图标类型的切换
type: ['bar', 'line']
}
}
},
// x轴数据
xAxis: {
type: 'category', // 类目轴
data: ['一月', '二月', '三月', '四月', '五月', '六月'] //类目轴数据
},
// y轴
yAxis: {
type: 'value' //数值轴
},
// series用于存放多个对象
series: [{
name: '语文',
data: [120, 200, 150, 140, 100, 90], // y轴的数据
barWidth: '30%', //柱状图宽度
type: 'bar', //图标类型,bar为柱状图,line为折线图,pie饼图
markPoint: { //设置最大值和最小值
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: { //设置平均值
data:[
{type: 'average', name: '平均值'}
]
},
label: { //显示数值
show: true,
position: 'top', //位置top / left / right / bottom / inside
// rotate: 30 //倾斜
},
},{
name: '数学',
data: [70, 20, 120, 118, 80, 100], // y轴的数据
barWidth: '30%', //柱状图宽度
type: 'bar', //图标类型,bar为柱状图,line为折线图,pie饼图
}]
}
myChart.setOption(option)
},
methods: {
}
}
</script>
<style scoped lang='less'>
</style>
折线图
<template>
<div>
<div ref="main" style="width: 100%;height:400px;"></div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'AskFor',
mounted () {
var myChart = echarts.init(this.$refs.main)
let sizeFun = function () {
myChart.resize()
}
window.addEventListener('resize', sizeFun )
var option = {
//提示
tooltip: {
trigger: 'item', //触发的类型 item移入触发
triggerOn: 'click', //触发时机 mousemove移入触发 click点击触发
formatter: `{a}-{b}:{c}` //formatter决定了提示的内容
},
//图列
legend: {
data: ['语文','数学']
},
//工具按钮
toolbox: {
feature: {
saveAsImage: {}, //导出图片
dataView: {}, //数据视图
restore: {}, //重置还原
dataZoom: {}, //区域缩放
magicType: { //在哪些图标类型之间切换,动态图标类型的切换
type: ['bar', 'line']
}
}
},
// x轴数据
xAxis: {
type: 'category', // 类目轴
data: ['一月', '二月', '三月', '四月', '五月', '六月'], //类目轴数据
boundaryGap: false, //数据紧挨边缘
},
// y轴
yAxis: {
type: 'value', //数值轴
scale: '150' //当Y轴数据相差不大的时候,折现就是一条趋于平直的线,此时只要使Y轴数据的起始点不为0,scale可以设置
},
// series用于存放多个对象
series: [{
name: '语文',
// data: [120, 200, 150, 140, 100, 90], // y轴的数据
data: [120, 119, 116, 123, 124, 125], // y轴的数据:当Y轴数据相差不大的时候,折现就是一条趋于平直的线,此时只要使Y轴数据的起始点不为0,scale可以设置
barWidth: '30%', //柱状图宽度
type: 'line', //图标类型,bar为柱状图,line为折线图,pie饼图
label: { //显示数值
show: true,
position: 'top', //位置top / left / right / bottom / inside
// rotate: 30 //倾斜
},
markArea: { //固定区域标注阴影 [[这里是第一段标注阴影的开始和结束形式如{开始},{结束}],[这里是第二段标注阴影的开始和结束]]
data: [[{xAxis: '一月'},{xAxis: '二月'}],[{xAxis: '四月'},{xAxis: '六月'}]]
},
smooth: 1, //线条的平滑效果 0-1
lineStyle: { //线条样式
color: 'green',
type: 'solid', // 实现'solid' 虚线'dashed' 点线'dotted'
},
areaStyle: { //填充样式
color: '#feff74'
}
}]
}
myChart.setOption(option)
},
methods: {
}
}
</script>
<style scoped lang='less'>
</style>
散点图
<template>
<div>
<div ref="main" style="width: 100%;height:400px;"></div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'AskFor',
mounted () {
var myChart = echarts.init(this.$refs.main)
let sizeFun = function () {
myChart.resize()
}
window.addEventListener('resize', sizeFun )
var data = [{ "gender": "female", "height": 161.2, "weight": 51.6 }, { "gender": "female", "height": 167.5, "weight": 59 }, { "gender": "female", "height": 173, "weight": 59.8 },
{ "gender": "female", "height": 179.9, "weight": 67.3 }, { "gender": "female", "height": 170.5, "weight": 67.8 }, { "gender": "female", "height": 160, "weight": 47 },
{ "gender": "female", "height": 154.4, "weight": 46.2 }, { "gender": "female", "height": 162, "weight": 55 }, { "gender": "female", "height": 176.5, "weight": 83 },
{ "gender": "female", "height": 127.8, "weight": 54.4 }, { "gender": "female", "height": 152, "weight": 45.8 }, { "gender": "female", "height": 162.1, "weight": 53.6 },
{ "gender": "female", "height": 156.2, "weight": 73.2 }, { "gender": "female", "height": 150, "weight": 42.2 }, { "gender": "female", "height": 157.2, "weight": 49 },
{ "gender": "female", "height": 159, "weight": 73.2 }, { "gender": "male", "height": 180.3, "weight": 83.2 }, { "gender": "male", "height": 180.3, "weight": 83.2 }]
var newArray = []
for(var i=0; i<data.length; i++) {
var msgA = data[i].height
var msgB = data[i].weight
var msgH = [msgA,msgB]
newArray.push(msgH)
}
// console.log('处理后数据',newArray)
var option = {
//提示
tooltip: {
trigger: 'item', //触发的类型 item移入触发
triggerOn: 'click', //触发时机 mousemove移入触发 click点击触发
formatter: `{a}{b}:{c}` //formatter决定了提示的内容
},
// x轴数据
xAxis: {
type: 'value', // 数值轴
scale: true //非0开始,脱离0值比列
},
// y轴
yAxis: {
type: 'value', //数值轴
scale: true // 非0开始
},
// series用于存放多个对象
series: [{
name: '散点图',
// type: 'scatter', //scatter是散点图 effectScatter是涟漪动画
type: 'effectScatter',
rippleEffect: { // 涟漪动画效果控制大小
scale: 5,
},
showEffectOn: 'render', //涟漪动画效果控制触发类型 emphasis鼠标移动散点上触发 render一直存在涟漪效果
data:newArray, //散点图的数据
// symbolSize: 40 , //散点的大小
symbolSize: function(arg) {
// console.log(arg)
var msgA = arg[0]
var msgB = arg[1]
var b = msgB / (msgA * msgA)
if(b > 0.0028) {
return 20
}
return 5
},
itemStyle: {
// color: 'green' //散点颜色
color:function(arg) {
// console.log('输出',arg.data)
var msgA = arg.data[0]
var msgB = arg.data[1]
var b = msgB / (msgA * msgA)
if(b > 0.0028) {
return 'red'
}
return 'green'
}
}
}]
}
myChart.setOption(option)
},
methods: {
}
}
</script>
<style scoped lang='less'>
</style>
直角坐标系
<template>
<div>
<div ref="main" style="width: 100%;height:400px;"></div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'AskFor',
mounted () {
var myChart = echarts.init(this.$refs.main)
let sizeFun = function () {
myChart.resize()
}
window.addEventListener('resize', sizeFun )
var option = {
dataZoom: [ //区域缩放 dlide底部滑块区域缩放 inside滚轮区域缩放
{ // 第一个 dataZoom 组件
xAxisIndex: 0, // 表示这个 dataZoom 组件控制 第一个
// start: 0, //初始化的筛选条件 从0还是50结束百分比
// end: 50
},
{ // 第二个 dataZoom 组件
yAxisIndex: 0
}
],
grid: { // 边框可以控制边框大小以及表格位置和大小
// show: true,
// borderWidth: 10,
// borderColor: 'red',
// left: 30,
// top: 100
},
// x轴数据
xAxis: {
type: 'category', // 类目轴
data: ['一月', '二月', '三月', '四月', '五月', '六月'], //类目轴数据
// position: 'top', //坐标轴的位置
},
// y轴
yAxis: {
type: 'value' //数值轴
},
// series用于存放多个对象
series: [{
name: '语文',
data: [120, 200, 150, 140, 100, 90], // y轴的数据
barWidth: '30%', //柱状图宽度
type: 'bar', //图标类型,bar为柱状图,line为折线图,pie饼图
markPoint: { //设置最大值和最小值
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: { //设置平均值
data:[
{type: 'average', name: '平均值'}
]
},
label: { //显示数值
show: true,
position: 'top', //位置top / left / right / bottom / inside
// rotate: 30 //倾斜
},
},{
name: '数学',
data: [70, 20, 120, 118, 80, 100], // y轴的数据
barWidth: '30%', //柱状图宽度
type: 'bar', //图标类型,bar为柱状图,line为折线图,pie饼图
}]
}
myChart.setOption(option)
},
methods: {
}
}
</script>
<style scoped lang='less'>
</style>
饼图
<template>
<div>
<div ref="main" style="width: 100%;height:400px;"></div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'AskFor',
mounted () {
var myChart = echarts.init(this.$refs.main)
let sizeFun = function () {
myChart.resize()
}
window.addEventListener('resize', sizeFun )
var option = {
// series用于存放多个对象
series: [{
type: 'pie',
data: [{name: '一月',value: 7120},{name: '二月',value: 5784},{name: '三月',value: 8945},{name: '四月',value: 4666}],
label: { //提示设置
show: true,
formatter: function(arg) {
// console.log(arg)
return arg.name +'消费'+ arg.value + '\n'+ arg.percent + '%'
}
},
// radius:'20%' //半径 直接像素 百分比是宽度或者高度中较小的一半
// radius: ['50%','75%'] //第一个代表内圆半径,第二个是外圆半径
roseType: 'radius', //南丁格尔图、玫瑰图
selectedMode: 'single', //single选中的偏离出来 multiple选中的每一段都会偏离
selectedOffset: 30, //设置偏移量
}]
}
myChart.setOption(option)
},
methods: {
}
}
</script>
<style scoped lang='less'>
</style>