一篇搞定vue中echarts图表(位置、提示框、标题、坐标轴以及系列列表，直接cv一个图表，点进来不吃亏)

感觉有用就点个赞吧,给我一波小动力~~~

1、grid 图表位置

• 折线图、柱状图

grid: {
        top: '15%',
        right: '10%',
        left: '10%',
        bottom: '12%'
    },

• 饼图、仪表盘(写series里)、雷达图(写radar里)

center: ['50%', '50%'],   //圆的位置
radius: ['42%', '50%'],     //圆的环的大小

• 地图

//方法1......写在option里
layoutCenter: ["50%", "43%"], //位置
layoutSize: "68%", //百分比大小

//方法2......写在geo里
center: [123.83531246, 14.0267395887],

2、legend 图例

legend: {
        data: ["销售水量", "主营业务"],  //图例的数据
        top: "15%",   //图例的位置
        icon:"circle",  //图例的形状
        x: 'right',        //图例在右侧
        orient: 'vertical'，  //图例纵向排布   horizontal为横向排布
        textStyle: {         //图例字体的颜色
            color: "#ffffff"
        }
    },

3、tooltip 图表提示框

tooltip: {
        show: true ,
        trigger: "axis",
        axisPointer: {
            type: "shadow",   //提示框类型
            label: {       //坐标轴指示器的文本标签
                show: true
            }
        }
    },

4、title 图表标题

title: {
            text: 'Snow蛋糕店-本周各类蛋糕销量',   //主标题
            subtext: '点击极坐标系下即可与圆环图交互\n点击柱状图排序',   //副标题
            textAlign: 'left',    //居左
            textStyle: {         //样式
                 fontSize: 20
             }
        },

5、xAxis X轴/yAxis Y轴

xAxis/yAxis: {
        data: category,
        name:"坐标轴名称",    //坐标轴名称
        min:10,         //X轴最小刻度
        max:50,         //X轴最大刻度
        nameGap: 15 ,   / /坐标轴名称与轴线之间的距离
        splitLine:{      //去除网格线
			show:true,
			lineStyle: {
			    color:"#fff"
			}
		},
        splitArea : {show : false},      //去除网格区域
        axisLine: {       //坐标轴轴线
            lineStyle: {           //坐标轴轴线颜色
                color: '#ccc'
            }
        },
        axisLabel:{           //坐标轴标签
                color："#fff",
                interval:0,
                rotate:50    //X轴字体倾斜
        },
        axisTick: {   //坐标轴刻度
            show:false,   //不显示坐标轴刻度
        },
        rich:{   //自定义富文本样式
            
        }
    },

6、series 系列列表

series: [{
          name: '1',      //名称
          nameTextStyle: {     
              color: "rgb(186,191,195)"    //x轴上方单位的颜色
            },
          type: 'bar',     //类型  柱状图
          stack: "总量",    //数据堆叠，判断是否叠加
          barWidth: '15%',    //柱子的宽度
          itemStyle: {         //图形样式
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{    //颜色渐变
                    offset: 0,
                    color: '#fccb05'
                }, {
                    offset: 1,
                    color: '#f5804d'
                }]),
                barBorderRadius: 12,
            },
          },
          data: [400, 400, 300, 300, 300, 400, 400, 400, 300]    //数据
        }, 
        {
            name: "总数",
            type: "line",    //样式  折线
            smooth: true,   //折线是否平滑
            symbolSize:10,   //标记的大小
            symbol:'circle',   //标记的类型
            lineStyle: {      
                normal: {
                width: 8,           //折线线条粗细设置
                color: {             //折线颜色渐变
                    type: 'linear',
                    colorStops: [{
                        offset: 0,
                        color: '#A9F387' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#48D8BF' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                },
                shadowColor: 'rgba(72,216,191, 0.3)',
                shadowBlur: 10,
                shadowOffsetY: 20
          },
            itemStyle: {       //折线拐点标记
                normal: {
                    color: "rgba(252,230,48,1)",
                    barBorderRadius: 0,
                    label: {
                        "show": true,
                        "position": "top",
                    }
                }
            },
            areaStyle: {   //填充区域样式
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "red" },
                  { offset: 0.5, color: "pink" },
                  { offset: 1, color: "black" }
                ])
              }
            }, 
        },
        {
          name: '3',
          type: 'bar',
          stack: "总量",
          barWidth: '15%',
          itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#248ff7'
                }, {
                    offset: 1,
                    color: '#6851f1'
                }]),
            barBorderRadius: 11,
            }
          },
          data: [400, 600, 700, 700, 1000, 400, 400, 600, 700]
        }]

7、tip(如果折线图的区域的颜色渐变不生效，可用此方法)

areaStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(26,75,106,1)" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(26,75,106,0)" // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                }
              }

感觉有用就点个赞吧~~~