zoukankan      html  css  js  c++  java
  • echarts itemStyle symbol 折线图特定点样式调整

    实现如下:

    <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>
  • 相关阅读:
    bzoj3675 [Apio2014]序列分割
    bzoj3206 [Apio2013]道路费用
    bzoj3205 [Apio2013]机器人
    bzoj4241 历史研究
    bzoj2821 作诗(Poetize)
    bzoj2724 [Violet 6]蒲公英
    bzoj2811 [Apio2012]Guard
    bzoj2809 [Apio2012]dispatching
    PHP 文字,图片水印,缩略图,裁切成小图(大小变小)
    PHP文件下载方式
  • 原文地址:https://www.cnblogs.com/guanpingping/p/13758945.html
Copyright © 2011-2022 走看看