日线 拿东方财富的返回的接口数据为例

Option 下面的参数

xAxis X轴

  xAxis: {
    data: :['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27'] // X轴显示的数据
  },

yAxis y轴

yAxis: {
                        scale: true,
                        splitArea: {
                            show: true
                        }
                    },

tooltip 加上这个鼠标滑动到该柱子上提示

 tooltip: { // 加上这个鼠标滑动到该柱子上提示
    trigger: 'axis',
    formatter: function(params) {
        var res = params[0].name;
        for (var i = params.length - 1; i >= 0; i--) {
            if (params[i].value instanceof Array) {
                res += '' + params[i].seriesName;
                res += '<br> 开盘 : ' + params[i].value[1] + '<br> 收盘 : ' + params[i].value[2];
                res += '<br>最低 : ' + params[i].value[3] + ' <br> 最高 : ' + params[i].value[4];
            } else {
                res += '' + params[i].seriesName;
                res += ' : ' + params[i].value;

            }
        }
        return res
    }
},

dataZoom 缩放

 start: number
    // 缩放的结束位置的百分比，0 - 100
    end: number
    // 缩放的开始位置的数值，只有在工具栏的缩放行为的事件中存在。
    startValue?: number
    // 缩放的结束位置的数值，只有在工具栏的缩放行为的事件中存在。
    endValue?: number

  dataZoom: [{ // 缩放
        startValue: '2021-12-01',
        endValue: "2022-03-11"
    },
    {
        type: 'inside'
    }
],

series

  series: [{
            type: 'candlestick',
            name:"日线",
            data: [
                [20, 34, 10, 38],// 二维数组  0等于开盘价  1等于收盘价  2等于最低价 3等于最高价
                [40, 35, 30, 50],
                [31, 38, 33, 44],
                [38, 15, 5, 42]
            ] 
        }]

点击查看该示例的代码

<template>
    <div class="">
        <div v-if="ma5!=0">
            MA5: {{ma5}}
            <span class="ml20">MA10: {{ma10}}</span>
            <span class="ml20">MA20: {{ma20}}</span>
        </div>
        <div class="dfdteeer" ref="ecahre"> </div>
    </div>
</template>
<script>
    const upColor = '#47B262';
    const downColor = '#EB5454';
    import {
        dcjson
    } from "./dataJson"
    export default {
        data() {
            return {
                ma5: 0,
                ma10: 0,
                ma20: 0
            }
        },
        computed: {

        },
        components: {

        },
        methods: {
            calculateMA(dayCount) {
                var result = [];
                for (var i = 0, len = dcjson.data.length; i < len; i++) {
                    if (i < dayCount) {
                        result.push('-');
                        continue;
                    }
                    var sum = 0;
                    for (var j = 0; j < dayCount; j++) {
                        sum += +dcjson.data[i - j][2];
                    }
                    result.push(sum / dayCount);
                }
                return result;
            },
            calculatebar() {
                let jjbse = []
                dcjson.data.map(a => {
                    jjbse.push({
                        value: a[5],
                        itemStyle: {
                            color: (a[1] - a[2] < 0) ? downColor : upColor
                        }
                    })
                })
                return jjbse
            }
        },
        mounted() {

            let dcdata = dcjson.data
            let th = this
            this.$nextTick(async () => {
                var myChart = echarts.init(this.$refs.ecahre);

                const xTime = []
                const seriesData = []
                dcdata.map(a => {
                    xTime.push(a[0])
                    seriesData.push([a[1], a[2], a[4], a[3], a[5]])
                })

                myChart.setOption({
                    xAxis: [{
                        type: 'category',
                        gridIndex: 0,
                        data: xTime,
                        show: false,
                    }, {
                        type: 'category',
                        gridIndex: 1,
                        boundaryGap: false,
                        axisLine: {
                            onZero: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        min: 'dataMin',
                        max: 'dataMax'
                    }],
                    yAxis: [{
                        scale: true,
                        splitArea: {
                            show: true
                        },
                        axisLabel: {

                        },
                        gridIndex: 0
                    }, {
                        scale: true,
                        gridIndex: 1,
                        splitNumber: 2,
                        axisLabel: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },

                        splitLine: {
                            show: false
                        }
                    }],
                    legend: {
                        data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30']
                    },
                    grid: [{
                        left: '1%',
                        right: '2%',
                        bottom: '15%',
                        top: "6%",
                        containLabel: true
                    }, {
                        left: '2%',
                        right: '2%',
                        top: '80%',
                        bottom: 0,
                        containLabel: true
                    }],

                    tooltip: { // 加上这个鼠标滑动到该柱子上提示
                        trigger: 'axis',
                        formatter: function(params) {
                            console.log(params);
                            var res = params[0].name;
                            for (var i = params.length - 1; i >= 0; i--) {
                                if (params[i].value instanceof Array) {
                                    res = `
                    ${res}${params[i].seriesName}<br>
                   开盘 :${params[i].value[1]} <br> 
                   收盘 :${params[i].value[2]}<br>
                   最低 :${params[i].value[3]}<br> 
                   最高 :${params[i].value[4]}<br> 
                  成交量 :${(params[i].value[5]/10000).toFixed(2)}万
            `
                                }
                            }
                           try{
                                th.ma5 = params[1].value.toFixed(2)
                            th.ma10 = params[2].value.toFixed(2)
                            th.ma20 = params[3].value.toFixed(2)
                           }catch(e){}
                            return res
                        }
                    },
                    //                    滑动的时候竖线关联竖线
                    axisPointer: {
                        link: [{
                            xAxisIndex: 'all'
                        }],
                        label: {
                            backgroundColor: '#777'
                        }
                    },
                    //                    两个图表关联缩放
                    dataZoom: [{
                            type: 'inside',
                            xAxisIndex: [0, 1],
                            start: 40,
                            end: 100
                        },
                        {
                            show: true,
                            xAxisIndex: [0, 1],
                            type: 'slider',
                            top: '100%',
                            start: 40,
                            end: 100
                        }
                    ],
                    series: [{
                            type: 'candlestick',
                            name: "日线",
                            data: seriesData, // 二维数组  0等于开盘价  1等于收盘价  2等于最低价 3等于最高价
                            /*markPoint: { //添加点 比如添加最高价格
                                label: {
                                    formatter: function(param) {
                                        return param.value
                                    }
                                },
                                data: [{//提示最高价格
                                    name: 'highest value',
                                    type: 'max',
                                    valueDim: 'highest'
                                }, {//提示最低价格
                                    name: 'lowest value',
                                    type: 'min',
                                    valueDim: 'lowest'
                                }, ]
                            },*/
                            markLine: {
                                symbol: ['none', 'none'],
                                data: [
                                    [{ //最高点和最低点连线
                                            name: 'from lowest to highest',
                                            type: 'min',
                                            valueDim: 'lowest',
                                            symbol: 'circle',
                                            symbolSize: 10,
                                            label: {
                                                show: false
                                            },
                                            emphasis: {
                                                label: {
                                                    show: false
                                                }
                                            }
                                        },
                                        {
                                            type: 'max',
                                            valueDim: 'highest',
                                            symbol: 'circle',
                                            symbolSize: 10,
                                            label: {
                                                show: false
                                            },
                                            emphasis: {
                                                label: {
                                                    show: false
                                                }
                                            }
                                        }
                                    ],
                                ]
                            },
                        }, {
                            name: 'MA5',
                            type: 'line',
                            showSymbol: false,
                            data: this.calculateMA(5),
                            color: "#000",
                        },
                        {
                            name: 'MA10',
                            type: 'line',
                            showSymbol: false,
                            data: this.calculateMA(10),
                            color: "yellow",
                        },
                        {
                            name: 'MA20',
                            type: 'line',
                            showSymbol: false,
                            data: this.calculateMA(20),
                            color: "#FF00FF"
                        },

                        {
                            type: 'bar',
                            xAxisIndex: 1,
                            yAxisIndex: 1,
                            data: this.calculatebar(),
                            markPoint: {
                                data: [
                                    [{
                                        type: 'min',
                                        valueDim: 'highest'
                                    }, {
                                        type: 'max'
                                    }]
                                ]
                            },
                            markLine: {
                                lineStyle: {
                                    type: 'dashed'
                                },
                                data: [
                                    [{
                                            symbol: 'none',
                                            x: '92%',
                                            yAxis: 'max'
                                        },
                                        {
                                            symbol: 'circle',
                                            label: {
                                                position: 'start',
                                                formatter: function(a) {
                                                    return (a.value / 10000).toFixed(2) + '万'
                                                }
                                            },
                                            type: 'max',
                                            name: '最高点'
                                        }
                                    ]
                                ]
                            }
                        },
                    ]
                });
            })
        },
    }

</script>
<style scoped>
    .dfdteeer {
        height: 500px;
    }

</style>