<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>