修改echarts中简单的样式

项目场景：如何修改echarts中简单的样式（只是针对简单的样式属性哈）

https://echarts.apache.org/zh/index.html----//echarts官网

echarts随便找一个图 要把上面的图改成下面这种样式 在这里插入图片描述

1.首先是标题

//echarts这种标题属性是legend属性，官网也写得比较详细
  legend: {
           show:true, //显示隐藏
           //这四个属性都是设置legend在图表所显示的位置--有需求自己设置
          // left: 100,
          // right :0，
          // bottom :0,
          // top :10,
          selectedMode:false,//此属性控制legend是否可以点击
          icon: 'circle',//设置legend样式显示：circle,pie,stack等也可以自己设置图表格式为'image://+icon文件地址'
          itemWidth: 15, // 设置宽度
          itemHeight: 15, // 设置高度
          itemGap: 30 // 设置间距
          },
//大概就这些像自定义legend显示可以用data 这里只做一个示范哈
  		data:[ {
                name:'2016',
                textStyle:{
                    fontSize:12,
                    fontWeight:'bolde',
                    color:'#000'
                },
        
            }]

2.关于x轴，y轴的样式（直接上代码）

//以x轴为例
    xAxis: {
            name:'x轴',//轴name
            // offset: 0,//轴偏移
            axisLine: {//这个属性是显示轴线的
                show: false,
                lineStyle: {//轴线的样式
                    color: "#000",
                    fontSize: 10
                }
            },
            axisTick: {//刻度线
                show: false
            },
            splitLine: {// 网格线
                show: false
            },
            axisLabel: {//横轴数据
                interval: 0, //横轴信息全部显示
                textStyle: {
                    color: "#808080", //X轴文字颜色
                    fontSize: 12
                },
                //需要自定义轴数据就用formatter
                formatter: function(value) {
                    console.log(value)
                    //var value;
                    //if (value >= 10000) {
                        //value = value / 10000 + 'w';
                    //} else if (value < 10000) {
                        //value = value;
                    //} //这里以y轴为例当数据大于万就换算一下数字
                    return value
                }
            },
        }

3.图表样式

//还是以上图为例哈，改成这种效果
					series: [{
							type: 'bar',
							barWidth: '20',//柱状图的宽度
							color: '#1A84ED'//柱状图的颜色
						},
						{
							type: 'bar',//图表类型
							barWidth: '20',//柱状图的宽度
							color: '#06CD99'//柱状图的颜色
						},

					]
//整体图显示位置
					grid: {
						top: 40, // 位置 百分比也可以纯数字也可以
						bottom: 30,
						left:'12%', 
						right: '6%',
						containLabel: false, // gird 区域是否包含坐标轴的刻度标签
					},

到这里其实都差不多了，之前自己写的话以为echarts样式就那么一点儿，但是后面要自己实现的时候疯狂百度会找到很多属性来修改原来的样式使echarts更好看更能贴近ui设计的图–后面给大家附上如何在小程序里使用echarts写一个地图，如下图： 类似这样的echarts地图，以四川为例

```javascript
renderMap(e) {
      let {
          width,
          height
      } = e;
      width = width - 20;
      let canvas = that.$refs.zfmapchart.canvas;
      echarts.setCanvasCreator(() => canvas);
      const chart = echarts.init(canvas, null, {
          width: width,
          height: height
      })
      echarts.registerMap('四川省', sichuanJson);//地图json--自己要用什么地区的就去找那个地区的json我这里用的四川的
      var optionMap = {
          tooltip: { //点击图表显示弹框
              trigger: 'item',
              backgroundColor: 'rgba(0,0,0,0.8)',
              extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.6);',
              formatter: p => {
                  let t= p.name + "：" + (p.value || '-');
                  return t;
              }
          },
          visualMap: {
              selectedMode: false,//是否能点击
              hoverLink: false, //鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮
              orient: "horizontal", //图例排列方向
              min: 0,
              max: 300,
              textStyle: {
                  fontSize: 9,
              },
              itemWidth: 20, //图形的宽度，即长条的宽度。
              itemHeight: 10, //图形的高度，即长条的高度。
              align: 'bottom', //文字位置显示
              right: '5%',
              bottom: '5%',
              itemGap: 2, //每两个图元之间的间隔距离，单位为px
              show: false,
              type: 'piecewise',
              // pieces: [ // 自定义每一段的范围，以及每一段的文字
              // 	{
              // 		min: 0,
              // 		label: '>0'
              // 	}, // 不指定 max，表示 max 为无限大（Infinity）。
              // ],
              inRange: {
                  color: ['#E0EAF4', '#7B9BF1', '#5E6EE0']//图形颜色
              },
          },
          geo: {
              show: true,
              map: '四川省',//要与上面的的一致
              zoom: 1.2,//地图大小比例
              aspectScale: 1.0,
              label: {//控制显示地图城市名
   			 normal: {
                  show: false
              },
              emphasis: {
                  show: false
              }
          		},
         	 itemStyle: {
             	 normal: {
                  areaColor: '#efefef',
                  borderWidth: 1, //设置外层边框
                  borderColor: '#ddd',
                  shadowColor: 'rgba(0,54,255, 1)'
             	 },
             	 emphasis: {
                  areaColor: 'purple',
              }
          }
      },
      //配置属性
      series: [{
          type: 'map',
          zoom: 1.2,
          roam: false, //鼠标滚轮缩放
          geoIndex: 0,
          animation: false,
          itemStyle: {
              normal: {
                  borderWidth: 1,
                  borderColor: '#ffffff', //区域边框色
                  areaColor: '#E0EAF4', //区域背景色
                  label: {
                      show: false,
                      textStyle: {
                          color: '#000', //文字颜色
                          fontSize: 10 //文字大小
                      }
                  }
              },
              emphasis: {// 选中样式
                  borderWidth: 1,
                  borderColor: 'purple',
                  areaColor: 'purple',//区域颜色
                  shadowColor: '#ccc',
								label: {
                      show: false,
                      textStyle: {
                          color: '#000'
                      }
                  }
              }
          },
          data: [{name: '成都市',value: 155},
				 {name: '绵阳市',value: 166},
                 {name: '自贡市',value: 152},
                 {name: '攀枝花市',value: 20},
                 {name: '泸州市',value: 50},
                 {name: '德阳市',value: 30},
                 {name: '广元市',value: 20},
                 {name: '遂宁市',value: 14},
                 {name: '内江市',value: 15},
                 {name: '乐山市',value: 222},
                 {name: '南充市',value: 25},
                 {name: '眉山市',value: 66},
                 {name: '宜宾市',value: 152},
                 {name: '广安市',value: 48},
                 {name: '达州市',value: 33},
                 {name: '雅安市',value: 66},
                 {name: '巴中市',value: 44},
                 {name: '资阳市',value: 22},
                 {name: '彭州市',value: 58},
                 {name: '邛崃市',value: 123},
                 {name: '崇州市',value: 159},
                 {name: '阿坝藏族羌族自治州',value: 57},
                 {name: '甘孜藏族自治州',value: 95},
                 {name: '凉山彝族自治州',value: 256},
          ], //属性

      }]
  };
  //初始化echarts实例
  chart.setOption(optionMap);
  that.$refs.zfmapchart.setChart(chart);
			},