vue中eharts的使用注意相关

在使用时首先获取页面dom元素，然后相关配置信息在option里，最后用 myChart.setOption(option);导出，后面的window.add......是让图表自适应宽高用的

let chartDom = document.querySelector("#one");
    let myChart = echarts.init(chartDom);
    let option;
    option:{};
option && myChart.setOption(option);

    window.addEventListener("resize", function () {
      myChart.resize();
    });

在option的title里可以设置图表标题，并且相关的意思都已经注释，

 title: {
          text: "大洲感染总人数趋势图",
          textStyle:{
            color:'white',  //颜色
            fontSize:'12'   //大小
          },
          top:'5px',   //偏移
          left:'30%'   //偏移
        },

修改legend样式

legend: {
           textStyle:{
                fontSize: 18,//字体大小
                color: '#ffffff'//字体颜色
           },
           data: [],
bottom:'5px',
          left: "center",
}

修改x轴字体颜色

xAxis : [
          {
                  type : 'category',
                  data : [],
                  axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#ffffff'
                            }
                        }
                    }
                ]

修改y轴字体颜色

yAxis : [
            {
                   type : 'value',
                   name : '',
                   axisLabel : {
                            textStyle: {
                                color: '#ffffff'
                            }
                        }
               }
        ]

修改图表的提示样式：

 

 分段式：

 visualMap: {
            type: "piecewise", //分段型。 // splitNumber: 6,
            inverse: true,
            pieces: [
              {
                min: 0,
                max: 0,
                color: "#fff",
              },
              {
                min: 1,
                max: 499,
                color: "#fef7c1",
              },
              {
                min: 500,
                max: 4999,
                color: "#f6c461",
              },
              {
                min: 5000,
                max: 9999,
                color: "#ee833c",
              },
              {
                min: 10000,
                max: 100000,
                color: "#ec6948",
              },
              {
                min: 100000,
                max: 500000,
                color: "#d15438",
              },
              {
                min: 500000,
                color: "#ab4730",
              },
            ],
            left: "left",
            top: "bottom",
            textStyle: {
              color: "#fff",
            },
          },

条状：

visualMap: {
            max: 500000,
            calculable: true,
            inRange: {
              color: [
                "#ffffbf",
                "#fee090",
                "#fdae61",
                "#f46d43",
                "#d73027",
                "#a50026",
              ],
            },
          },

这是竖向柱状图的样例：

option = {
      // title:{
      //   text:'标题'
      // },
      grid: {
        // 让图表占满容器
        top: "50px",
        left: "100px",
        right: "20px",
        bottom: "20px",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "red",
          },
        },
      },
      toolbox: {
        feature: {
          // 是否开启列表数据显示
          dataView: { show: true, readOnly: false },
          // 右上角是否开启切换图类型显示，和显示的统计图类型
          magicType: { show: true, type: ["line", "bar"] },
          // 是否刷新
          restore: { show: true },
          saveAsImage: { show: true },
        },
      },
      // 列表头部的名称显示，要和下面的数据对应
      legend: {
        data: ["月累计收益", "日收益曲线"],
      },
      // x轴的数据
      xAxis: [
        {
          type: "category",
          // 横轴显示的数据，上面请求到的数据
          data: dailyTime,
          axisPointer: {
            type: "shadow",
          },
        },
      ],
      // y轴的数据，如果有多个就写多个，会在右边显示，一般是两个，左右各一个
      yAxis: [
        {
          type: "value",
          // y轴最小值到最大值，中心点是最小的
          min: 0,
          max: 180,
          // y轴每段间隔的大小
          interval: 50,
          // 后面跟的单位
          axisLabel: {
            formatter: "{value} 万元",
          },
        },
      ],
      // 数据，有几项写几项
      series: [
        {
          // 数据的名称，
          name: "月累计收益",
          // 数据图类型，bar(柱形图)，line(线型图)，等等
          type: "bar",
          // 柱状图的宽度
          barWidth: 30,
          // 数据要跟的单位
          tooltip: {
            valueFormatter: function (value) {
              return value + " 万元";
            },
          },
          // 数据的详细数值，在上面请求道的数据里
          data: dailyAmount,
        },

        {
          name: "日收益曲线",
          type: "line",
          // yAxisIndex: 1,
          // tooltip: {
          //   valueFormatter: function (value) {
          //     return value + ' °C';
          //   }
          // },
          // 折现弧度
          smooth: 0.4,
          data: monthAmount,
        },
      ],
    };

还有横向柱状图的样例：

 series: [
        {
          name: "收益(万元)",
          type: "bar",
//-----------------这个属性让两个数据条在一行，谁前谁后是series里的顺序问题---------------------
          stack: "Total",
          color: "#6dc473",
          label: {
            show: true,
          },
          emphasis: {
            focus: "series",
          },
          data: income,
        },
        {
          name: "支出(万元)",
          type: "bar",
          stack: "Total",
          color: "#e47470",
          label: {
            show: true,
            position: "inside",
          },
          emphasis: {
            focus: "series",
          },
          data: expense,
        },
        {
          name: "结余(万元)",
          type: "bar",
          color: "#83c0df",
          label: {
            show: true,
            position: "left",
          },
          emphasis: {
            focus: "series",
          },
          data: balance,
        },
      ],

有待更新。。。。。。