vue中更改echarts面积图渐变色，字体，隐藏y轴等样式效果

进阶de程序猿

已于 2023-06-01 16:32:54 修改

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： echarts vue 文章标签： vue.js

于 2020-04-13 13:22:10 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45101496/article/details/105486616

本文介绍了如何在Vue项目中使用ECharts修改面积图的样式，包括设置渐变色、调整字体以及隐藏Y轴，以实现自定义的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML部分

<div id="state" :style="{width: '550px', height: '250px'}"></div>

js部分

mounted() {
   
   
    this.active();
 },
methods：{
   
   
 active() {
   
   
      let myChart = this.$echarts.init(document.getElementById("state"));
      myChart.setOption({
   
   
        // 全局字体样式
        textStyle: {
   
   
          color: "#4081DC"
        },
        // hover
        tooltip: {
   
   
          trigger: "axis",
          axisPointer: {
   
   
            type: "cross",
            label: {
   
   
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
   
   
          data: ["交易金额", "总交易金额"],
          show: true,
          textStyle: {
   
   
            color: "#fft" //fft可同色
          },
          left: "50px",
          top