<template>
<div class="container">
<div id="myEchart" style="height: 800px"></div>
</div>
</template>
<script>
import echarts from 'echarts'
import echartChina from './mixin/echartChina.js'
export default {
name: 'text',
data () {
return {
mapData: [
{name: '北京',value: '555'},
{name: '天津',value: '1000'},
{name: '上海',value: '100'},
{name: '重庆',value: '100'},
{name: '河北',value: '600'},
{name: '河南',value: '400'},
{name: '云南',value: '350'},
{name: '辽宁',value: '70'},
{name: '黑龙江',value: '750'},
{name: '湖南',value: '10'},
{name: '安徽',value: '300'},
{name: '山东',value: '10'},
{name: '新疆',value: '400'},
{name: '江苏',value: '80'},
{name: '浙江',value: '160'},
{name: '江西',value: '150'},
{name: '湖北',value: '650'},
{name: '广西',value: '200'},
{name: '甘肃',value: '180'},
{name: '山西',value: '666'},
{name: '内蒙古',value: '120'},
{name: '陕西',value: '222'},
{name: '吉林',value: '520'},
{name: '福建',value: '220'},
{name: '贵州',value: '900'},
{name: '广东',value: '500'},
{name: '青海',value: '500'},
{name: '西藏',value: '800'},
{name: '四川',value: '700'},
{name: '宁夏',value: '10'},
{name: '海南',value: '590'},
{name: '台湾',value: '780'},
{name: '香港',value: '850'},
{name: '澳门',value: '999'},
{name: '南海诸岛',value: '700'}
]
}
},
mounted () {
let myChartChina = this.$echarts.init( document.getElementById('fzyChartChina'))
let option = {
backgroundColor: '#fff',//背景色
// *********** title 标题 ***************
title: {
x: 'left',//水平定位位置，默认 left. 可选 'center','right','left','number(单位为px)'
y: 'top',//垂直定位位置，默认为 top. 可选 'top','bottom','center','number(单位为px)'
backgroundColor: '#fff',
borderColor: '#ccc',//边框颜色
borderWidth: '0',//边框线宽度 单位px
itemGap: '',//祝福标题纵向间隔单位为 px
text: '主标题',
textStyle: {//主题样式
color: '#fff'
},
subtext: '副标题',
subtextStyle: {
color: '#fff'//副标题样式
}
},
//*********** legend 图例 *************
legend: {
type: 'plain',//图例类型，默认 plain,可选值 'scroll'
orient: 'horizontal',//布局方式，默认 为 'horizontal'，可选 ‘vertical’
top: '1%',//图例相对容器位置，类似的还有 bottom/left/right
x: 'right',
itemGap: '10',//各个item之间的间隔，单位为px
itemWidth: '20',//图例图形宽带
itemHeight: '14',//图形高度
selected: {
'销量': true,
},
textStyle: {//内容样式
color: '#fff'
}
},
//******* dataRange 值域 *********
dataRange: {
orient: 'vertical', // 布局方式，默认为垂直布局，可选为：'horizontal' ¦ 'vertical'
x: 'left', // 水平安放位置，默认为全图左对齐，可选为：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
y: 'bottom', // 垂直安放位置，默认为全图底部，可选为： 'top' ¦ 'bottom' ¦ 'center'¦ {number}（y坐标，单位px）
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 值域边框颜色
borderWidth: 0, // 值域边框线宽，单位px，默认为0（无边框）
padding: 5, // 值域内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
// 横向布局时为水平间隔，纵向布局时为纵向间隔
itemWidth: 20, // 值域图形宽度，线性渐变水平布局宽度为该值 * 10
itemHeight: 14, // 值域图形高度，线性渐变垂直布局高度为该值 * 10
splitNumber: 5, // 分割段数，默认为5，为0时为线性渐变
color:['#1e90ff','#f0ffff'],//颜色
//text:['高','低'], // 文本，默认为数值文本
textStyle: {
color: '#333' // 值域文字颜色
}
},
//******** tooltip 提示框 *****
tooltip: {
trigger: 'item', // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
hideDelay: 100, // 隐藏延迟，单位ms
transitionDuration : 0.4, // 动画变换时间，单位s
backgroundColor: 'rgba(0,0,0,0.7)', // 提示背景颜色，默认为透明度为0.7的黑色
borderColor: '#333', // 提示边框颜色
borderRadius: 4, // 提示边框圆角，单位px，默认为4
borderWidth: 0, // 提示边框线宽，单位px，默认为0（无边框）
padding: 5, // 提示内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'line', // 默认为直线，可选为：'line' | 'shadow'
lineStyle : { // 直线指示器样式设置
color: '#48b',
width: 2,
type: 'solid'
},
shadowStyle : { // 阴影指示器样式设置
width: 'auto', // 阴影大小
color: 'rgba(150,150,150,0.3)' // 阴影颜色
}
},
textStyle: {
color: '#fff'
},
formatter:'{b}-销售数量：{c}' //提示内容
},
// ********* grid 网格 ********
grid: {
x: 80,
y: 60,
x2: 80,
y2: 60,
// width: {totalWidth} - x - x2,
// height: {totalHeight} - y - y2,
backgroundColor: 'rgba(0,0,0,0)',
borderWidth: 1,
borderColor: '#ccc'
},
//是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
visualMap: {
min: 0, //最小值
max: 1000, //最大值
left: 'left',
top: 'bottom',
calculable: true, //是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
inRange: {
// color: ['#6BB7D9', '#ABC36C', '#E0CF18','#E5CC0F', '#C76646'] //颜色
color: ['#DAFAFC', '#73B8EE', '#0873DE']
},
textStyle: {
color: '#fff'
},
dimension: 0
},
//------------- x轴 -------------------
xAxis: {
show:true, //---是否显示
position:'bottom', //---x轴位置
offset:0, //---x轴相对于默认位置的偏移
type:'category', //---轴类型，默认'category'
name:'月份', //---轴名称
nameLocation:'end', //---轴名称相对位置
nameTextStyle:{ //---坐标轴名称样式
color:"#fff",
padding:[5,0,0,-5], //---坐标轴名称相对位置
},
nameGap:15, //---坐标轴名称与轴线之间的距离
//nameRotate:270, //---坐标轴名字旋转
axisLine:{ //---坐标轴 轴线
show:true, //---是否显示
//-----箭头 -----
symbol:['none', 'arrow'], //---是否显示轴线箭头
symbolSize:[8, 8] , //---箭头大小
symbolOffset:[0,7], //---箭头位置
//----- 线 -----
lineStyle:{
color:'#fff',
width:1,
type:'solid',
},
},
axisTick:{ //---坐标轴 刻度
show:true, //---是否显示
inside:true, //---是否朝内
lengt:3, //---长度
lineStyle:{
//color:'red', //---默认取轴线的颜色
width:1,
type:'solid',
},
},
axisLabel:{ //---坐标轴 标签
show:true, //---是否显示
inside:false, //---是否朝内
rotate:0, //---旋转角度
margin: 5, //---刻度标签与轴线之间的距离
//color:'red', //---默认取轴线的颜色
},
splitLine:{ //---grid 区域中的分隔线
show:false, //---是否显示，'category'类目轴不显示，此时我的X轴为类目轴，splitLine属性是无意义的
lineStyle:{
//color:'red',
//width:1,
//type:'solid',
},
},
splitArea:{ //--网格区域
show:false, //---是否显示，默认false
},
data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],//内容
},
//-------------- y轴 -------------------
yAxis: {
show:true, //---是否显示
position:'left', //---y轴位置
offset:0, //---y轴相对于默认位置的偏移
type:'value', //---轴类型，默认'category'
name:'销量', //---轴名称
nameLocation:'end', //---轴名称相对位置value
nameTextStyle:{ //---坐标轴名称样式
color:"#fff",
padding:[5,0,0,5], //---坐标轴名称相对位置
},
nameGap:15, //---坐标轴名称与轴线之间的距离
//nameRotate:270, //---坐标轴名字旋转
axisLine:{ //---坐标轴 轴线
show:true, //---是否显示
//------ 箭头 ------
symbol:['none', 'arrow'], //---是否显示轴线箭头
symbolSize:[8, 8] , //---箭头大小
symbolOffset:[0,7], //---箭头位置
//------ 线 ------
lineStyle:{
color:'#fff',
width:1,
type:'solid',
},
},
axisTick:{ //---坐标轴 刻度
show:true, //---是否显示
inside:true, //---是否朝内
lengt:3, //---长度
lineStyle:{
//color:'red', //---默认取轴线的颜色
width:1,
type:'solid',
},
},
axisLabel:{ //---坐标轴 标签
show:true, //---是否显示
inside:false, //---是否朝内
rotate:0, //---旋转角度
margin: 8, //---刻度标签与轴线之间的距离
//color:'red', //---默认取轴线的颜色
},
splitLine:{ //---grid 区域中的分隔线
show:true, //---是否显示，'category'类目轴不显示，此时我的y轴为类目轴，splitLine属性是有意义的
lineStyle:{
color:'#666',
width:1,
type:'dashed', //---类型
},
},
splitArea:{ //--网格区域
show:false, //---是否显示，默认false
}
},
series:[
{
z: 1,
name:'地图',
type: 'map', //地图种类
map: 'china', //地图类型。
left: '10', //定位位置 left、right、top、bottom
right: '30%',
top: 20,
bottom: '40%',
zoom:0.75,//放大比例
itemStyle: { //地图区域的多边形 图形样式。
normal: {
borderColor: '#ccc',//边框颜色
borderWidth: 1,
label: {
show: true,
textStyle: {
color: '#fff'//文字显示颜色
}
}
},
emphasis:{ //高亮状态下的样试
label:{
show:true,
}
}
},
label: { //图形上的文本标签，可用于说明图形的一些数据信息
show:true,
},
data: this.mapData,
},
{
z: 2,
name:'柱状图',
type: 'bar', //图形类型
data: [],
itemStyle: { //地图区域的多边形 图形样式。
emphasis: {
color: "rgb(254,153,78)"
}
},
label: {
show:true,
},
},
{
z: 3,
name: '扇形图',
type: 'pie',
radius: ['23%', '30%'],//第一个数为内圈的宽度、第二个为外圈的宽度
center: ['30%', '75%'],//定位位置 第一个数为水平方向、第二个数为垂直方向
data: [],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
}
}
</script>
<style scoped>
</style>
Echart 属性解析的相关教程结束。
