echart 详细

加载图表

//基于准备好的dom，初始化echarts实例
const echarts_dom: any = ref();
var myChart: any;
let echartNull: any = null;
if (myChart != null && myChart != "" && myChart != undefined) {
   myChart.dispose(); //销毁
}
myChart = echarts.init(echarts_dom.value, echartNull, { locale: "ZH" });

option空数据

//判断xAxis_data x轴的数据为空
if (xAxis_data.length == 0 ) {
    option = {
      title: {
        text: "暂无数据",
        x: "center",
        y: "center",
        textStyle: {
          fontSize: 16,
          color: "#ffffff",
          fontWeight: "normal",
        },
      },
    };
 }else{
option={}
}

图表位置偏移

grid: {
  left: "16%",
  right: "4%",
  top: "4%",
  bottom: "4%",
},

X轴、Y轴颜色

axisLabel: {
  color: "#ffffff",
  fontSize: 14,
},
axisLine: {
  //x轴线的颜色以及宽度
  show: true,
  lineStyle: {
     color: "#ffffff",
     width: 0,
     type: "solid",
  },
},
//多个Y轴选择
yAxisIndex: 0,

legend配置

      legend: {
        right: "right",//位置
        orient: "horizontal",
        width: "80%",
        textStyle: {
          color: "#ffffff",
          fontSize: 14,
        },
      },

折线图 line 点、线颜色

smooth: true,//设定线的平滑
lineStyle: {//设定线的颜色
  color: "#208F93",
},
symbol: "circle",//设定实心点的形状
showSymbol: true,//是否展示实心点
symbolSize: 12, //设定实心点的大小
color: "#208F93", //设定实线点的颜色