首页 > 其他 > 详细

echarts itemStyle symbol 折线图特定点样式调整

时间:2020-10-02 00:01:16      阅读:632      评论:0      收藏:0      [点我收藏+]

技术分享图片

 

实现如下:

<template>
    <div class="tradeView">
        <div class="viewchart" ref="chart"></div>
        <div class="groupBtn">
            <div class="btn gbtn">
                <div class="sbtn gsbtn"><span></span></div>
                <span class="font">买点</span>
            </div>
            <div class="btn rbtn">
                <div class="sbtn rsbtn"><span></span></div>   
                <span class="font">卖点</span>
            </div>
        </div>
    </div>
</template>
<script>
import echarts from "echarts";
export default{
    name:tradeView,
    data(){
        return{
            xDate: ["10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00"],
            zsData: [
                {
                    "value":1000,
                    "type":1
                },
                {
                    "value":3000,
                },
                {
                    "value":2500,
                    "type":1
                },
                {
                    "value":4000,
                    "type":1
                },
                {
                    "value":5000,
                    "type":2
                },
                {
                    "value":3000,
                    "type":2
                },
                {
                    "value":2500,
                },
            ],
            options: {
                legend: {
                    data: [买点, 卖点],
                    bottom: 20
                },
                title:{ 
                    text: 成交可视图(BTC/USDT),
                    textStyle: {
                        color: #1D2035 ,
                        fontSize: 16
                    },
                },
                xAxis: [ // xAxis(直角坐标系 X 轴)、yAxis(直角坐标系 Y 轴)
                    {
                        type: "category",
                        boundaryGap: false,
                        data: [],
                    },
                ],
                yAxis: [
                    {   
                        position:right,
                        type: "value",
                    },
                ],
                series: [
                    {
                        name: "成交可视图(BTC/USDT)",
                        type: "line",
                        stack: "总量",
                        areaStyle: {},
                        data: [],
                        smooth: true, //是否用曲线显示
                        symbol: none,
                        lineStyle: {
                            color: "#FFA002", //线条颜色
                        },
                        areaStyle: {
                            normal: {
                                // 填充色渐变
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: "#FFA002"},
                                    { offset: 1, color: "#FFF"},
                                ])
                            }
                        },
                    },
                ],
            },
       }
    },
    mounted() {
        this.draw();
    },
    methods:{
        draw() {
            // 初始化echarts实例
            this.myChart = echarts.init(this.$refs.chart);
            this.options.xAxis[0].data = JSON.parse(JSON.stringify(this.xDate));
            for(var k=0;k<this.zsData.length;k++){//主要实现改变特定点样式代码
                let obj ={};
                if(this.zsData[k].type == 1){//判断是买点
                        obj = {
                            value:this.zsData[k].value,
                            symbolSize:10,//拐点大小
                            symbol: circle,//拐点样式                            itemStyle : { 
                                  normal: {
                                    color: "#35B65A", //拐点颜色
                                    borderColor:#eee,
                                    borderWidth:2
                                  },
                            }
                        },
                        this.options.series[0].data.push(obj)
                }else if(this.zsData[k].type == 2){
                       obj = {
                            value:this.zsData[k].value,
                            symbolSize:10,//拐点大小
                            symbol: circle,
                            itemStyle : { 
                                normal: {
                                color: "#FF494A ", //拐点颜色
                                borderColor:#eee,
                                borderWidth:2
                                },
                            }
                        },
                        this.options.series[0].data.push(obj)
                }else{
                    this.options.series[0].data.push(this.zsData[k].value)
                }
            }
            setTimeout(() => {
                this.myChart.setOption(this.options); //设置option
                this.myChart.resize(); //防止越界,重绘canvas
            }, 300);
        },
    }

}
</script>

 

echarts itemStyle symbol 折线图特定点样式调整

原文:https://www.cnblogs.com/guanpingping/p/13758945.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!