Vue3使用ECharts数据可视化控件

Vue3使用ECharts数据可视化控件

1：安装并引入ECharts

1.1：安装echarts

新建终端输入一下命令

yarn add echarts vue-echarts
yarn add -D @vue/composition-api 

2：在页面中使用Echars组件

<template>
<!--  ECharts默认宽高是0，如果不设置页面是不显示的-->
    <div ref="mychart" id="demoDIV" ></div>
</template>

<script>
// 1:引用echarts
import * as echarts from 'echarts'
export default {
    mounted(){
        let myEcharts = echarts.init(this.$refs.mychart);
        // 设置参数
        myEcharts.setOption({
          // echarts标题
          title:{
            text:"helloworld"
          },
          // 传入x轴参数
          xAxis:{
            data:["EZ","VN","NOC","MF"]
          },
          // 传入y轴参数
          yAxis:{

          },
          // 系列
          series:{
            name:"LOL英雄大全",
            // 设置图表类型
            type:"bar",
            data:[20,15,35,25]
          }
        });
    }
}
</script>

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

2：ECharts配置项

2.1：title配置

title 标题组件，包含主标题和副标题。

更多的详情设置可以见官网

Documentation - Apache ECharts

		title:{
    
    
            text:"helloworld",
            // 设置主标题点击之后的超链接
            link:"https://echarts.apache.org/zh/option.html#title",
            // 设置打开超链接的方式，self就是当前页打开超链接
            target:"self",
            // 设置背景颜色
            backgroundColor:"pink",
            // 设置边框颜色
            borderColor:"red",
            // 设置边框粗细
            borderWidth:5,
            // 设置标题居中
            x:"center",
            // 设置主标题文字样式
            textStyle:{
    
    
              color:"yellow",
              fontSize:30
            },
            // 设置副标题
            subtext:"副标题",
            // 设置副标题的超链接
            sublink:"https://echarts.apache.org/zh/index.html",
            // 设置副标题文字样式
            subtextStyle:{
    
    
              color:"yellow",
              fontSize:15
            },

标题效果如下：

更多设置：

      title: {
    
    
        show: true, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
        text: "1主标题", //主标题文本，'\n'指定换行
        // link:'http://www.baidu.com', //主标题文本超链接,默认值true 
        // target: "self", //指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口） 
        subtext: '副标题', //副标题文本，'\n'指定换行 
        // sublink: '', //副标题文本超链接 
        // subtarget: null, //指定窗口打开副标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口） 
        // x:'center', //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px） 
        // y: 'bottom', //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px） 
        // backgroundColor: 'red', //标题背景颜色，默认'rgba(0,0,0,0)'透明 
        // borderWidth: 5, //标题边框线宽，单位px，默认为0（无边框） 
        // borderColor: '#ccffee', //标题边框颜色,默认'#ccc' 
        // padding: 5, //标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距 
        // itemGap: 10, //主副标题纵向间隔，单位px，默认为10 
        // textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"} 
            // fontFamily: 'Arial, Verdana, sans...', 
            // fontSize: 12, 
            // fontStyle: 'normal', 
            // fontWeight: 'normal', // }, 
            // subtextStyle: {//副标题文本样式{"color": "#aaa"} 
            // fontFamily: 'Arial, Verdana, sans...', 
            // fontSize: 12, 
            // fontStyle: 'normal', 
            // fontWeight: 'normal', 
          // },
          // subtextStyle: {
    
    
          //   color: "#a1b2c3", // 副标题文字的颜色。
          //   fontStyle: "normal", // 副标题文字字体的风格。 'normal'  'italic'  'oblique'
          //   fontWeight: "bold", // 副标题文字字体的粗细。 'normal' 'bold'  'bolder'  'lighter' 500|600。
          //   fontSize: 18, // 字体大小
          //   lineHeight: "130", // 行高
          //   textBorderColor: "red", // 文字本身的描边颜色。
          //   textBorderWidth: 5, // 文字本身的描边宽度。
          //   textShadowColor: "transparent", // 文字本身的阴影颜色。
          //   textShadowBlur: 0, // 文字本身的阴影长度。
          //   textShadowOffsetX: 0, // 文字本身的阴影 X 偏移。
          //   textShadowOffsetY: 0, //  文字本身的阴影 Y 偏移。
          // },
      },

2.2：提示框组件（tooltip）

用于配置鼠标滑过或点击图表时的显示框

Documentation - Apache ECharts

现在不作任何处理，就在xAxis和yAxis同级的地方只加一个tooltip:{}，效果如下

tooltip:{
    
    
            // 触发类型
            // trigger:"item",      // 图形触发，就是鼠标移动在柱状图形以内的区域触发
            trigger:"axis",          // 坐标轴触发，只要在坐标轴的范围内就触发器，哪怕在柱状图形上面
            // 坐标轴指示器
            axisPointer:{
    
    
              type:"cross"   // line:显示一个实线  shadow：阴影效果   cross：十字准星效果
            },
            // 是否显示出页面的悬浮弹框
            showContent:true,
            // 悬浮层样式
            backgroundColor:"pink",
            borderColor:"red",
            borderWidth:5,
            // 设置文字样式
            textStyle:{
    
    
              color:"yellow"
            }
          },

效果如下：

当然，我们也可以设置提示框的提示信息，通过formatter。

Documentation - Apache ECharts

修改一下date：

            data:[
              {
    
    "value":20, "nikename":"伊泽瑞尔"},
              {
    
    "value":15, "nikename":"薇恩"},
              {
    
    "value":24, "nikename":"梦魇"},
              {
    
    "value":10, "nikename":"好运姐"},
            ]

tooltip里面设置如下：

            // 自定义提示框信息
            formatter(params){
    
    
              // 可以控制台打印一下这个信息
              // console.log(params)
              for(var i=0;i<params.length;i++){
    
    
                return "名字："+params[i].name + "--中文名："+params[i].data.nikename+"--使用人数："+params[i].data.value
              }
            }

结果如下：

更多设置

      tooltip: {
    
    //提示框组件，用于配置鼠标滑过或点击图表时的显示框。
        show: true, // 是否显示
        trigger: 'axis', // 触发类型  'item'图形触发：散点图，饼图等无类目轴的图表中使用； 'axis'坐标轴触发；'none'：什么都不触发。
        axisPointer: {
    
     // 坐标轴指示器配置项。
            type: 'cross', // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
          },
        // showContent: true, //是否显示提示框浮层，默认显示。
        // triggerOn: 'mouseover', // 触发时机'click'鼠标点击时触发。 
        backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景颜色。
        borderColor: '#333', // 提示框浮层的边框颜色。
        borderWidth: 0, // 提示框浮层的边框宽。
        padding: 5, // 提示框浮层内边距，
        textStyle: {
    
     // 提示框浮层的文本样式。
            color: '#fff',
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontFamily: 'sans-serif',
            fontSize: 14,
        },
        // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
        // 模板变量有 {a}, {b}，{c}，分别表示系列名，数据名，数据值等
        // formatter: '{a}--{b} 的成绩是 {c}'
        formatter: function(arg) {
    
    
            return arg[0].name + '的分数是:' + arg[0].data
        }
      },

2.3：图例组件——legend

图例组件展现了不同系列的标记，颜色和名字。可以通过点击图例控制哪些系列不显示。

这个图例具体作用可见这个Examples - Apache ECharts

现在添加了如下代码

		legend:{
    
    
            show:true,    // 设置图例的开启或者是关闭
          },

效果见下图：

点击一下添加的图例，柱状图就会被隐藏

          legend:{
    
    
            show:true,    // 设置图例的开启或者是关闭
            // icon:"circle",    // 设置图例样式，circle代表是圆形
            // 设置图例位置
            top:"10%",
            left:"10%",
            // 设置图例宽高
            itemWidth:10,
            itemHeight:20,
            // 设置文字信息
            textStyle:{
    
    
              color:"red",
              fontSize:30,
              backgroundColor:"pink"
            }
          },

结果如下：

更多设置：

      legend: {
    
    
        show: true, //是否显示
        icon: "circle",//图例样式
        // top: "55%", // 组件离容器的距离
        // bottom:"20%", // 组件离容器的距离
        // left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'
        // right: "5%", 
        // left:"10%" // // 组件离容器的距离
        // padding: 5, // 图例内边距
        // itemWidth: 6, // 图例标记的图形宽度。
        // itemGap: 20, // 图例每项之间的间隔。
        // itemHeight: 14, // 图例标记的图形高度。
        // selectedMode: false, // 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。
        inactiveColor: "#fffddd", // 图例关闭时的颜色。
        textStyle: {
    
    //图例的公用文本样式。
          // color: "#aabbcc", // 文字的颜色。
          // fontStyle: "normal", // 文字字体的风格。'italic'
          // fontWeight: "normal", // 文字字体的粗细。 'normal' 'bold' 'bolder' 'lighter' 100 | 200 | 300 | 400...
          // fontFamily: "sans-serif", // 文字的字体系列。
          // fontSize: 12, // 文字的字体大小。
          // lineHeight: 20, // 行高。
          // backgroundColor: "transparent", // 文字块背景色。
          // borderColor: "transparent", // 文字块边框颜色。
          // borderWidth: 0, // 文字块边框宽度。
          // borderRadius: 0, // 文字块的圆角。
          // padding: 0, // 文字块的内边距
          // shadowColor: "transparent", // 文字块的背景阴影颜色
          // shadowBlur: 0, // 文字块的背景阴影长度。
          // shadowOffsetX: 0, // 文字块的背景阴影 X 偏移。
          // shadowOffsetY: 0, // 文字块的背景阴影 Y 偏移。
          // // width: 50, // 文字块的宽度。 默认
          // // height: 40, // 文字块的高度 默认
          // textBorderColor: "transparent", // 文字本身的描边颜色。
          // textBorderWidth: 0, // 文字本身的描边宽度。
          // textShadowColor: "transparent", // 文字本身的阴影颜色。
          // textShadowBlur: 0, // 文字本身的阴影长度。
          // textShadowOffsetX: 0, // 文字本身的阴影 X 偏移。
          // textShadowOffsetY: 0, // 文字本身的阴影 Y 偏移。
        }
      },

3：ECharts绘制基本图形

3.1：ECharts绘制柱状图

3.1.1：基本柱状图的设置

<template>
<!--  ECharts默认宽高是0，如果不设置页面是不显示的-->
    <div ref="mychart" id="demoDIV" ></div>
</template>

<script>
// 1:引用echarts
import * as echarts from 'echarts'
export default {
    mounted(){
        // 1. 初始化
        let myEcharts = echarts.init(this.$refs.mychart);
        // 2.设置数据
        // 设置轴
        let xDate = ["美食", "日化", "数码", "蔬菜"]
        let yDate = [500, 357, 218, 652]
        // 3.设置配置项
        let option={
          title:{
            text:"主标题",
          },
          xAxis:{   // 配置x轴参数
            data:xDate,
            type:"category"   // 坐标轴类型  value是数据轴   category是类目轴
          },

          yAxis:{   // 配置y轴参数
          },
          // 系列
          series:{
            name:"销量",
            // 设置图表类型， bar就是柱状图
            type:"bar",
            data: yDate
          }
        }
        myEcharts.setOption(option);
    }
}
</script>

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

3.1.2：柱状图的更多效果

设置最大值最小值的标记

这个需要在service中进行设置

            // 设置最大值和最小值的展示
            markPoint:{
    
    
              data:[//标注的数据数组，每一项都是一个对象
                {
    
    
                  type:"max",
                  name:"最大值"
                },{
    
    
                  type:"min",
                  name:"最小值"
                }
              ]
            }

设置显示平均值

		// 图标的标线
            markLine:{
    
    
              data:[
                {
    
    
                  type:"average",
                  name: "平均值"
                }
              ]
            }

3.1.3：水平柱状图

		xAxis:{
    
       // 配置x轴参数
            data:xDate,
            type:"category"   // 坐标轴类型  value是数据轴   category是类目轴
          },
          yAxis:{
    
       // 配置y轴参数
          },

之前设置x轴为类目轴，则y轴就位数据轴，我们如果想做水平的柱状图把xAxis和yAxis配置交换即可

          xAxis:{
    
       // 配置x轴参数
            type:"value"   // 坐标轴类型  value是数据轴   category是类目轴
          },
          yAxis:{
    
       // 配置y轴参数
            data:xDate,
            type:"category"   // 坐标轴类型  value是数据轴   category是类目轴
          },

如果要设置轴的样式就需要在series里面做手脚了

            barWidth:20,            // 设置轴宽度
            color:"red",            // 设置轴颜色

也可以单独设置每一个轴的颜色或者样式，但是我相信没有项目会这么无聊，就不写了

3.2：ECharts绘制饼状图

3.2.1：绘制一个最基本的饼状图

<template>
  <!--  ECharts默认宽高是0，如果不设置页面是不显示的-->
  <div ref="mychart" id="demoDIV" ></div>
</template>

<script>
// 1:引用echarts
import * as echarts from 'echarts'
export default {
  mounted(){
    // 1. 初始化
    let myEcharts = echarts.init(this.$refs.mychart);
    // 2.设置数据
    let data = [
      {name:"美食", value:67},
      {name:"日化", value:76},
      {name:"数码", value:90},
      {name:"蔬菜", value:58}
    ]
    // 3.设置配置项
    let option={
      title:{
        text:"饼状图",
        left:"center"
      },
      // 设置图例
      legend:{
        left:"left",
        // 设置图例的布局及朝向
        orient:"verica"
      },
      // 系列
      series:{
        name:"销量统计",
        // 设置图表类型， pie就是饼状图
        type:"pie",
        data: data
      }
    }
    myEcharts.setOption(option);
  }
}
</script>

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

3.2.2：饼状图的更多设置

修改系列项

	// 系列
      series:{
    
    
        name:"销量统计",
        // 设置图表类型， pie就是饼状图
        type:"pie",
        data: data,
        radius:["50%", "70%"],  // 设置饼图半径，第一项为内半径，第二项为外半径
        // 设置环形图的文本标签
        label:{
    
    
          show:true,
          position:"outsize"   // outsize外侧展示，inside：内展示（在饼状图颜色区域内），center：中心展示（饼状图中心）
        },
        // 是否设置成南丁格尔图
        roseType:"area",
        itemStyle:{
    
     // 设置显示样式
          color:"#c23531",  // 设置饼状图颜色
          shadowBlur:200,   // 设置阴影
          shadowColor: 'rgba(0, 0, 0, 0.5)'// 设置阴影颜色
        }
      }

3.3：ECharts绘制折线图

3.3.1：折线图的基本设置

<template>
  <!--  ECharts默认宽高是0，如果不设置页面是不显示的-->
  <div ref="mychart" id="demoDIV" ></div>
</template>

<script>
// 1:引用echarts
import * as echarts from 'echarts'
export default {
    
    
  mounted(){
    
    
    // 1. 初始化
    let myEcharts = echarts.init(this.$refs.mychart);
    // 2.设置数据
    let xData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    let data = [150, 230, 224, 218, 135, 147, 260]
    // 3.设置配置项
    let option={
    
    
      title:{
    
    
        text:"折线图",
      },
      xAxis:{
    
    
        type:"category",
        data:xData
      },
      yAxis:{
    
    
        type:"value"
      },
      // 设置系列
      series:[
        {
    
    
          data:data,
          type:"line"   //line代表折线图
        }
      ]

    }
    // 4:设置配置项
    myEcharts.setOption(option);
  }
}
</script>

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

基本折线图效果如下：

3.3.2：折线图的更多设置

如果想对折线图进行过多设置就应该在series中进行设置

      // 设置系列
      series:[
        {
    
    
          data:data,
          type:"line",   //line代表折线图
          smooth:true,    //开启平滑样式
          areaStyle:{
    
    },     //开启样式填充
          markPoint:{
    
    
            data:[
              {
    
    type:"max", name:"最大值"},
              {
    
    type:"min", name:"最小值"}
            ]
          },
          markLine:{
    
    
            data:[
              {
    
    type:"average", name:"平均值"}
            ]
          }
        }
      ]

3.3.3：设置折线堆叠效果

<template>
  <!--  ECharts默认宽高是0，如果不设置页面是不显示的-->
  <div ref="mychart" id="demoDIV" ></div>
</template>

<script>
// 1:引用echarts
import * as echarts from 'echarts'
export default {
  mounted(){
    // 1. 初始化
    let myEcharts = echarts.init(this.$refs.mychart);
    // 2.设置数据
    let xData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    let dataA = [150, 230, 224, 218, 135, 147, 260]
    let dataB = [63, 500, 24, 89, 320, 150, 200]
    let dataC = [80, 232, 401, 394, 290, 130, 320]
    let dataD = [0, 600, 231, 521, 135, 147, 400]

    // 3.设置配置项
    let option={
      title:{
        text:"折线图",
      },
      xAxis:{
        type:"category",
        data:xData
      },
      yAxis:{
        type:"value"
      },
      // 设置系列
      series:[
        {
          name:"美食",
          type:"line",
          // 数据堆叠
          stack:"num",    //数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加。
          data:dataA,
          areaStyle:{},   // 样式填充
          emphasis:{
            focus:"series"  //聚焦到当前的区域高亮
          }
        },
        {
          name:"日化",
          type:"line",
          // 数据堆叠
          stack:"num",    //数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加。
          data:dataB,
          areaStyle:{},   // 样式填充
          emphasis:{
            focus:"series"  //聚焦到当前的区域高亮
          }
        },
        {
          name:"数码",
          type:"line",
          // 数据堆叠
          stack:"num",    //数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加。
          data:dataC,
          areaStyle:{},   // 样式填充
          emphasis:{
            focus:"series"  //聚焦到当前的区域高亮
          }
        },
        {
          name:"蔬菜",
          type:"line",
          // 数据堆叠
          stack:"num",    //数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加。
          data:dataD,
          areaStyle:{},   // 样式填充
          emphasis:{
            focus:"series"  //聚焦到当前的区域高亮
          }
        }
      ]

    }
    // 4:设置配置项
    myEcharts.setOption(option);
  }
}
</script>

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

3.4：ECharts绘制散点图

3.4.1：散点图的基本设置

<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);
    let data = [
          [9.0, 7.04],
          [18.07, 4.33],
          [3.0, 9.65],
          [9.05, 8.23],
          [18.0, 9.76],
          [15.0, 7.56],
          [23.4, 5.31],
          [10.1, 7.47],
          [16.0, 8.26],
          [12.7, 3.53],
          [9.35, 7.2],
          [7.4, 8.2],
          [3.07, 4.82],
          [18.2, 6.83],
          [2.02, 4.47],
          [1.05, 3.33],
          [4.05, 4.96],
          [6.03, 7.24],
          [17.0, 6.55],
          [12.0, 8.84],
          [8.18, 5.82],
          [6.32, 5.68],
        ]
    // 2.设置配置项
    let option = {
      xAxis: {},
      yAxis: {},
      series: [
        {
          // 设置散点图的大小
          symbolSize: 20,
          data: data,
          type: "scatter",//散点图
        },
      ],
    };
    // 3.设置图表绘制图表
    myChart.setOption(option);
  },
};
</script>

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

3.4.1：散点图的更多设置

设置颜色效果（渐变色）

		// 添加图像的样式
          color:{
    
    
            // 线性渐变
            type: "linear",
            // 相当于在图形包围盒中的百分比
            x:0,
            y:0,
            x2:1,
            y2:0,
            colorStops:[
                {
    
    
                  offset:0,
                  color:"#00ccff"
                },{
    
    
                  offset:1,
                  color:"rgba(255,173,2,.9)"
                }
            ]
          }

设置鼠标移上去颜色高亮

		emphasis: {
    
    //高亮的图形和标签样式
            itemStyle: {
    
    
              borderColor: "rgba(102,205,46,0.30)",
              borderWidth: 30,
            },
          },

也可以添加一个鼠标移入的提示框组件

      tooltip: {
    
    },//提示框组件

效果如下：

3.5：配置项–grid

grid 为直角坐标系内绘图网格。可以在网格上绘制折线图，柱状图 散点图（气泡图）也就是设置图标离容器的距离样式。

grid配置项：图标离容器的距离

1. how：是否显示直角坐标系网格-----------值:true?false

2. left：图表离容器左侧的距离-----------------值:number?百分比

3. top：图表离容器顶部的距离-----------------值:number?百分比

4. right：图表离容器右侧的距离---------------值:number?百分比

5. bottom：图表离容器底部的距离------------值:number?百分比

6. backgroundColor：网格背景色-------------值:rgba或#000000

7. borderColor：网格的边框颜色--------------值:rgba或#000000

8. borderWidth：网格的边框线宽-------------值:number

<template>
  <div class="about">
    <!-- 2.echarts根结点根容器如果我们没有去指定当前容器的大小 echarts会按照0来进行处理 -->
    <div id="myecharts" ref="demoh"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  mounted() {
    let myChart = echarts.init(this.$refs.demoh);
    let xData = ["美食", "数码", "日化", "蔬菜", "熟食"];
    let yData = [88, 75, 20, 210, 35];
    let option = {
      xAxis: {
        data: xData,
        type: "category",
      },
      yAxis: {
        type: "value",
      },
      grid: {
        show: true,
        left: "5%",
        top: "5%",
        right: "5%",
        bottom: "5%",
        backgroundColor: "rgba(224, 17, 17, 1)",
        borderColor: "rgba(96, 67, 67, 1)",
      },
      series: [
        {
          type: "bar",
          name: "销量",
          data: yData,
        },
      ],
    };
    myChart.setOption(option);
  },
};
</script>
<style scoped>
#myecharts {
  width: 600px;
  height: 600px;
  border: 2px solid red;
}
</style>

3.6：ECharts绘制K线图

3.6.1：基本的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>

效果如下：

3.6.2：K线图样式优化

设置鼠标移入之后的提示信息：

	tooltip: {
    
    
        //设置提示框
        trigger: "axis",
        axisPointer: {
    
    
          type: "cross",
        },
      },

设置样式颜色：

在Series里面添加设置

		// 设置颜色
          itemStyle: {
    
    
            color: "#ec0000", //上涨的颜色
            color0: "pink", //下跌的颜色
            borderColor: "#8A0000", //上涨的边框色
            borderColor0: "#008F28", //下跌的边框色
          },

添加提示框信息

		markPoint:{
    
    
            data:[
              {
    
    
                name: "最大值",
                type: "max",
                valueDim: "highest", //valueDim 指定是在哪个维度上的最大值、最小值、平均值
              },
              {
    
    
                name: "最小值",
                type: "min",
                valueDim: "lowest",
              },
              {
    
    
                name: "平均值",
                type: "average",
                valueDim: "close",
              },
            ]
          }

yle>

效果如下：

[外链图片转存中...(img-sIDMz05W-1661389243080)]

#### 3.6.2：K线图样式优化

设置鼠标移入之后的提示信息：

```javascript
	tooltip: {
        //设置提示框
        trigger: "axis",
        axisPointer: {
          type: "cross",
        },
      },

设置样式颜色：

在Series里面添加设置

		// 设置颜色
          itemStyle: {
    
    
            color: "#ec0000", //上涨的颜色
            color0: "pink", //下跌的颜色
            borderColor: "#8A0000", //上涨的边框色
            borderColor0: "#008F28", //下跌的边框色
          },

添加提示框信息

		markPoint:{
    
    
            data:[
              {
    
    
                name: "最大值",
                type: "max",
                valueDim: "highest", //valueDim 指定是在哪个维度上的最大值、最小值、平均值
              },
              {
    
    
                name: "最小值",
                type: "min",
                valueDim: "lowest",
              },
              {
    
    
                name: "平均值",
                type: "average",
                valueDim: "close",
              },
            ]
          }