Echarts学习笔记4（k线图、雷达图、漏斗图、仪表盘、关系图、数据区域缩放）

最新推荐文章于 2026-04-05 17:59:36 发布

原创最新推荐文章于 2026-04-05 17:59:36 发布 · 990 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#echarts #学习 #前端

笔记同时被 2 个专栏收录

102 篇文章

订阅专栏

Echarts（5.0）

8 篇文章

订阅专栏

本文详细介绍了如何通过K线图解读市场趋势，包括高低点分析和数据展示技巧。此外，还展示了如何优化K线图以提升数据可视化效果，并涵盖了其他图表如雷达图、漏斗图和仪表盘的配置与优化。

K线图可以查看k线历史走势，近期趋势，是上涨还是下跌，是调整还是震荡。分析k线的高低点和相对高低点。方便对于数据的走势进行查看

基本设置

<template>
  <div ref="myChart" id="myChart"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    // 1.初始化
    let myChart = echarts.init(this.$refs.myChart);
    // 2.设置配置项
    let option = {
      xAxis: {
        data: ["蔬菜", "水果", "熟食", "便捷食品"],
      },
      yAxis: {},
      series: [
        {
          type: "candlestick",//k线图
          data: [
            [20, 34, 10, 38],
            [40, 35, 30, 50],
            [31, 38, 33, 44],
            [38, 15, 5, 42],
          ],
        },
      ],
    };
    // 3.设置图表绘制图表
    myChart.setOption(option);
  },
};
</script>

<style>
#myChart {
  width: 500px;
  height: 500px;
  border: 1px solid red;
}
</style>

k线图效果优化

<template>
  <div ref="myChart" id="myChart"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data(){
    return {
      data:[
      [20, 34, 10, 38],
      [40, 35, 30, 50],
      [31, 38, 33, 44],
      [38, 15, 5, 42],
    ]
    }
  },
  computed:{
    newarr(){
    let linstdata= this.data.map((v)=>{
      
         return v[0]
      })
      return linstdata
    }
  },
  mounted() {
    // 1.初始化
    let myChart = echarts.init(this.$refs.myChart);
    // 2.设置配置项
    let option = {
      xAxis: {
        data: ["蔬菜", "水果", "熟食", "便捷食品"],
      },
      yAxis: {},
      tooltip: {
        //设置提示框
        trigger: "axis",
        axisPointer: {
          type: "cross",
        },
      },
      series: [
        {
          type: "candlestick", //k线图
          data: this.data,
          itemStyle: {
            color: "#ec0000", //上涨的颜色
            color0: "#00da3c", //下跌的颜色
            borderColor: "#8A0000", //上涨的边框色
            borderColor0: "#008F28", //下跌的边框色
          },
          markPoint: {
            data: [
              {
                name: "最大值",
                type: "max",
                valueDim: "highest", //valueDim 指定是在哪个维度上的最大值、最小值、平均值
              },
              {
                name: "最小值",
                type: "min",
                valueDim: "lowest",
              },
              {
                name: "平均值",
                type: "average",
                valueDim: "close",
              },
            ],
          },
        },
        {
          name: "MA20",
          type: "line",
          data: this.newarr,
          smooth: true,
          lineStyle: {
            opacity: 0.5,
          },
        },
      ],
    };
    // 3.设置图表绘制图表
    myChart.setOption(option);
  },
};
</script>

<style>
#myChart {
  width: 500px;
  height: 500px;
  border: 1px solid red;
}
</style>

雷达图

基本设置

<template>
  <div ref="myChart" id="myChart"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    // 1.初始化
    let myChart = echarts.init(this.$refs.myChart);
    // 2.设置配置项
    let option = {
      title: {
        text: "雷达图",
      },
      radar: [//雷达图坐标系组件，只适用于雷达图
        {
          // shape: 'circle',//设置及雷达图效果
          indicator: [//雷达图的指示器，用来指定雷达图中的多个变量（维度）
            { name: "蔬菜", max: 6500 },
            { name: "水果", max: 16000 },
            { name: "熟食", max: 30000 },
            { name: "数码", max: 38000 },
            { name: "家电", max: 52000 },
            { name: "日化", max: 25000 },
          ],
        },
      ],

      series: [
        {
          type: "radar", //雷达图
          data: [
            {
              value: [4200, 3000, 20000, 35000, 50000, 18000],
              name: "销量",
            },
          ],
        },
      ],
    };
    // 3.设置图表绘制图表
    myChart.setOption(option);
  },
};
</script>

<style>
#myChart {
  width: 500px;
  height: 500px;
  border: 1px solid red;
}
</style>

雷达图效果优化：

<template>
  <div ref="myChart" id="myChart"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    // 1.初始化
    let myChart = echarts.init(this.$refs.myChart);
    // 2.设置配置项
    let option = {
      title: {
        text: "雷达图",
      },
      radar: [//雷达图坐标系组件，只适用于雷达图
        {
          // shape: 'circle',//设置及雷达图效果
          indicator: [//雷达图的指示器，用来指定雷达图中的多个变量（维度）
            { name: "蔬菜", max: 6500 },
            { name: "水果", max: 16000 },
            { name: "熟食", max: 30000 },
            { name: "数码", max: 38000 },
            { name: "家电", max: 52000 },
            { name: "日化", max: 25000 },
          ],
          radius: 120,//b半径
          startAngle: 90,//坐标系起始角度，也就是第一个指示器轴的角度(可以让内容旋转)
          splitNumber: 10,//指示器轴的分割段数(内部的分割数量)。
          shape: "circle",//雷达图绘制类型
          axisName: {//雷达图每个指示器名称的配置项
            formatter: "【{value}】",//使用字符串模板，模板变量为指示器名称 {value}
            color: "#428BD4",
          },
          splitArea: {//坐标轴在 grid 区域中的分隔区域，默认不显示。
            areaStyle: {//分隔区域的样式设置。
              color: ["#77EADF", "#26C3BE", "#64AFE9", "#428BD4"],
              shadowColor: "rgba(0, 0, 0, 0.2)",
              shadowBlur: 10,
            },
          },
        },
      ],
      series: [
        {
          type: "radar", //雷达图
          symbol: "rect",//标记的图形。
          symbolSize: 12,//标记大小
          lineStyle: {
            type: "dashed",
          },
          data: [
            {
              value: [4200, 3000, 20000, 35000, 50000, 18000],
              name: "销量",
              areaStyle: {
                //设置填充
                color: "rgba(255, 228, 52, 0.6)",
              },
            },
          ],
        },
      ],
    };
    // 3.设置图表绘制图表
    myChart.setOption(option);
  },
};
</script>

<style>
#myChart {
  width: 500px;
  height: 500px;
  border: 1px solid red;
}
</style>

漏斗图基本设置

<template>
  <div ref="myChart" id="myChart"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {  
    // 1.初始化
    let myChart = echarts.init(this.$refs.myChart);
    // 2.设置配置项
    let option = {
      title: {
        text: "漏斗图",
      },
      tooltip: {//设置弹框
        trigger: "item",
        formatter: "{a} <br/>{b} : {c}%",
      },
   
    
      series: [
        {
       
          type: "funnel",//设置漏斗图
          data: [
            { value: 60, name: "美食" },
            { value: 40, name: "日化" },
            { value: 20, name: "数码" },
            { value: 80, name: "家电" },
            { value: 100, name: "蔬菜" },
          ],
        },
      ],
    };
    // 3.设置图表绘制图表
    myChart.setOption(option);
  },
};
</script>

<style>
#myChart {
  width: 500px;
  height: 500px;
  border: 1px solid red;
}
</style>

漏斗图效果实现

<template>
  <div ref="myChart" id="myChart"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {  
    // 1.初始化
    let myChart = echarts.init(this.$refs.myChart);
    // 2.设置配置项
    let option = {
      title: {
        text: "漏斗图",
      },
      tooltip: {//设置弹框
        trigger: "item",
        formatter: "{a} <br/>{b} : {c}%",
      },
   
    
      series: [
        {
       
          type: "funnel",//设置漏斗图
          left: "10%",//漏斗图组件离容器左侧的距离
          top: 60,//顶部距离
          bottom: 60,//底部距离
          // width: "80%",
          min: 0,//指定的数据最小值。
          max: 100,
          minSize: "0%",//数据最小值 min 映射的宽度。
          maxSize: "100%",
          sort: "ascending",//数据排序递减的   ascending递增 none根据数据
          gap: 2,//数据图形间距。
          label: {//提示信息位置
            show: true,
            position: "inside",
          },
        
          itemStyle: {//漏斗图样式
            borderColor: "red",
            borderWidth: 2,
          },
          emphasis: {//选中高亮的标签和图形样式。
            label: {
              fontSize: 30,
            },
          },
          data: [
               { value: 60, name: "美食" },
            { value: 40, name: "日化" },
            { value: 20, name: "数码" },
            { value: 80, name: "家电" },
            { value: 100, name: "蔬菜" },
          ],
        },
      ],
    };
    // 3.设置图表绘制图表
    myChart.setOption(option);
  },
};
</script>

<style>
#myChart {
  width: 500px;
  height: 500px;
  border: 1px solid red;
}
</style>

仪表盘

<template>
  <div ref="myChart" id="myChart"></div>
</template>

<script>
import * as echarts from "echarts"
export default {
  mounted(){
    let myEcharts=echarts.init(this.$refs.myChart)
    let options={
      series:[
        {
          type:"gauge",
          data:[
            {
              value:45,
              name:"提示信息"
            }
          ],
          detail:{
            valueAnimation:true
          },
          progress:{
            show:true
          }
        }
      ]
    }

    myEcharts.setOption(options)
  }

}
</script>

<style>
#myChart{
  width: 500px;
  height: 500px;
  border: 1px solid red;
}
</style>

关系图

创建节点

<template>
  <div ref="myChart" id="myChart"></div>
</template>

<script>
import * as echarts from "echarts"
export default {
  data(){
    return {
      list:[//创建节点数据
        {
          name: "韦小宝",
          id: "1",
        },
        {
          name: "方怡",
          id: "2",
        },
        {
          name: "双儿",
          id: "3",
        },
        {
          name: "茅十八",
          id: "4",
        },
        {
          name: "吴六奇",
          id: "5",
        },
      ]
    }
  },
  mounted(){
    let myEcharts=echarts.init(this.$refs.myChart)
    
    let options = {
     series:[
        {
          type: 'graph',//图标类型为关系图用于展现节点以及节点之间的关系数据
           layout: 'force',//图的布局  引导布局
          data:this.list
        }
        ]
      }

    myEcharts.setOption(options)
  }

}
</script>

<style>
#myChart{
  width: 500px;
  height: 500px;
  border: 1px solid red;
}
</style>

增加节点样式

<template>
  <div ref="myChart" id="myChart"></div>
</template>

<script>
import * as echarts from "echarts"
export default {
  data(){
    return {
      list:[//创建节点数据
        {
          name: "韦小宝",
          id: "1",
          symbolSize: 30,//节点大小
          symbol:'circle',//节点形状，
        },
        {
          name: "方怡",
          id: "2",
          symbolSize: 30,//节点大小
          symbol:'circle',//节点形状，
        },
        {
          name: "双儿",
          id: "3",
          symbolSize: 30,//节点大小
          symbol:'circle',//节点形状，
        },
        {
          name: "茅十八",
          id: "4",
          symbolSize: 30,//节点大小
          symbol:'circle',//节点形状，
        },
        {
          name: "吴六奇",
          id: "5",
          symbolSize: 30,//节点大小
          symbol:'circle',//节点形状，
        },
      ]
    }
  },
  mounted(){
    let myEcharts=echarts.init(this.$refs.myChart)
    
    let options = {
     series:[
        {
          type: 'graph',//图标类型为关系图用于展现节点以及节点之间的关系数据
           layout: 'force',//图的布局  引导布局
          data:this.list,
            itemStyle: {//节点的样式
              color: "#95dcb2"
            },
            label: {//图形上的文本标签
              show: true,
              position: "bottom",//位置底部
              distance: 5,//距离图形元素的距离
              fontSize: 18,
              align: "center",//文字水平对齐方式
            },
        }
        ]
      }

    myEcharts.setOption(options)
  }

}
</script>

<style>
#myChart{
  width: 500px;
  height: 500px;
  border: 1px solid red;
}
</style>

创建关系数据与图

<template>
  <div ref="myChart" id="myChart"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      list: [
        //创建节点数据
        {
          name: "韦小宝",
          id: "1",
          symbolSize: 30, //节点大小
          symbol: "circle", //节点形状，
        },
        {
          name: "方怡",
          id: "2",
          symbolSize: 30, //节点大小
          symbol: "circle", //节点形状，
        },
        {
          name: "双儿",
          id: "3",
          symbolSize: 30, //节点大小
          symbol: "circle", //节点形状，
        },
        {
          name: "茅十八",
          id: "4",
          symbolSize: 30, //节点大小
          symbol: "circle", //节点形状，
        },
        {
          name: "吴六奇",
          id: "5",
          symbolSize: 30, //节点大小
          symbol: "circle", //节点形状，
        },
      ],
      num: [
        //关系数据
        {
          source: "1", //边的源节点名称的字符串
          target: "2", //边的目标节点名称的字符串
          relation: {
            name: "老婆",
            id: "1",
          },
        },
        {
          source: "1",
          target: "3",
          relation: {
            name: "老婆",
            id: "1",
          },
        },
        {
          source: "1",
          target: "4",
          relation: {
            name: "兄弟",
            id: "1",
          },
        },
        {
          source: "4",
          target: "1",
          relation: {
            name: "兄弟",
            id: "1",
          },
        },
        {
          source: "3",
          target: "5",
          relation: {
            name: "义妹",
            id: "1",
          },
        },
      ],
    };
  },
  mounted() {
    let myEcharts = echarts.init(this.$refs.myChart);

    let options = {
      series: [
        {
          type: "graph", //图标类型为关系图用于展现节点以及节点之间的关系数据
          layout: "force", //图的布局  引导布局
          data: this.list,
          itemStyle: {
            //节点的样式
            color: "#95dcb2",
          },
          label: {
            //图形上的文本标签
            show: true,
            position: "bottom", //位置底部
            distance: 5, //距离图形元素的距离
            fontSize: 18,
            align: "center", //文字水平对齐方式
          },
          force: {
            //设置间距
            repulsion: 100, //点之间的距离
            gravity: 0.01, //设置距离中心点位置
            edgeLength: 200, //边的两个节点之间的距离
          },
          links: this.num, //节点间的关系数据

          edgeLabel: {
            //标签
            show: true,
            position: "middle", //标签位置线的中点
            fontSize: 12,
            formatter: (params) => {
              //标签内容格式设置内容
              return params.data.relation.name;
            },
          },
          edgeSymbol: ["circle", "arrow"], //边两边的类型

          autoCurveness: 0.01, //针对节点之间存在多边的情况，自动计算各边曲率
        },
      ],
    };

    myEcharts.setOption(options);
  },
};
</script>

<style>
#myChart {
  width: 500px;
  height: 500px;
  border: 1px solid red;
}
</style>

数据区域缩放

用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。

<template>
  <div ref="myChart" id="myChart"></div>
</template>

<script>
import * as echarts from "echarts"
export default {
  mounted(){
    let myChart=echarts.init(this.$refs.myChart)
    let xData=['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    let data=[150, 230, 224, 218, 135, 147, 260]
    let option = {
  xAxis: {
    type: 'category',
    data: xData
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data,
      type: 'line',
      smooth: true,
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        ]
      },
      markLine: {
        data: [{ type: 'average', name: 'Avg' }]
      }
    },
    
  ],
    dataZoom: [//用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。
    {
      type: 'slider',//滑动条型数据区域缩放组件
      xAxisIndex: 0,//x轴设置
      filterMode: 'none'//设置-----数据过滤不过滤数据，只改变数轴范围
    },
    {
      type: 'slider',
      yAxisIndex: 0,//y轴设置
      filterMode: 'none'
    },
 
  ],
};
    // 4.设置图表绘制图表
    myChart.setOption(option)
  }
}
</script>

<style>
#myChart{
  width: 500px;
  height: 500px;
  border: 1px solid red;
}
</style>