echarts使用小结

##option option = {

background: 设置背景颜色

title: { 标题设置

text: 标题内容
x: 'center' 标题文字居中
textStyle: {标题样式设置
    color:
    fontSzie:
}
subtextStyle: {副标题样式
        color: "#0EA5C3",
        fontWeight: "normal"
      } 
top:'2%'标题位置设置

},

toopltip: {设置鼠标滑过区域时显示的文字提示

trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'简单提示
formatter: function(parms) {复杂提示
     var str =
          parms.seriesName +
          "</br>" +
          parms.marker +
          "" +
          parms.data.legendname +
          "</br>" +
          "数量：" +
          parms.data.value +
          "</br>" +
          "占比：" +
          parms.percent +
          "%";
        return str;
      }
axisPointer: {提示的阴影
    type: "shadow",
    label: {
         backgroundColor: "#6a7985"
    }
  },

} legend: {侧边的位置和字体颜色设置

      bottom: 10,
      left: "center",
      textStyle: {
        color: "#8C8C8C"
      }
    },

xAxis: [

      {
        type: "value",
        // boundaryGap: true,//坐标轴两边留白
        axisLabel: {
          // 坐标轴刻度标签的相关设置。
          // interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
          // margin:15,
          textStyle: {
            color: "#078ceb",
            fontStyle: "normal",
            fontFamily: "微软雅黑"
          }
          // rotate: 50// 倾斜
        },
        axisTick: {
          // 坐标轴刻度相关设置。
          show: false
        },
        axisLine: {
          // 坐标轴轴线相关设置
          lineStyle: {
            color: "#fff",
            opacity: 0.2
          }
        },
        splitLine: {
          // 坐标轴在 grid 区域中的分隔线。
          show: false
        }
      }
    ],
    yAxis: {
      type: "category",
      splitLine: {
        show: false // 去掉网格线
      },
      axisLabel: {
        show: false // 去掉y轴的数据
      },
      axisLine: {
        lineStyle: {
          color: "#5F85C9",
          width: 1 // 改变轴线颜色
        }
      }
    },
{
        data: [],
        type: "bar",
        showBackground: true,
        barWidth: "40",
         markPoint: {折线图最高点设置一个标志
          data: [
            { type: 'max', name: '最大值' }
            // { type: 'min', name: '最小值' }
          ],
          itemStyle: {
            normal: {
              color: '#FF52A8'
            }
          }
        },
        itemStyle: {
          color: "#1D8DFF", // 修改柱子的颜色
          barBorderRadius: [6, 6, 0, 0] // 修改柱子圆角
        },
        itemStyle: {柱状图设置设置颜色渐变
          normal: {
            show: true,
            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
              // 0010从左到右渐变0001从上到下渐变
              {
                offset: 0,
                color: "#40202D"
              },
              {
                offset: 0.5,
                color: "#9C3969"
              },
              {
                offset: 1,
                color: "#F950A4"
              }
            ]),
            borderWidth: 0
          }
        }
        label: {
          // 在柱后面显示数据
          show: true,
          position: "top",
          color: "white",
          formatter: "{c}%"
        },
        symbol:
          "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",类似心电图
        backgroundStyle: {
          color: "rgba(220, 220, 220, 0.8)"
        }
      },

} }