echart.js 和 chart.js 改变圆点大小

原链接:https://blog.csdn.net/qq_14993375/article/details/81611525

 

 echart.js圆点

series : [
        {
            name:'零售额',
            type:'line',
            showSymbol: true,
            symbol:'emptyCircle',    //设定为实心点
            symbolSize: 20,   //设定实心点的大小
            animation: false,
            itemStyle: { //圆圈样式
                borderWidth: 2,
                color:'#f60',
            },
            lineStyle:{//线条样式
                width:5,
                color:'#f60'
            },
            data:[10, 12, 21, 54, 260, 830, 710]
        }
]

　　

Demo：http://jsrun.net/YxgKp

api文档：http://echarts.baidu.com/api.html#echarts

chart改变圆点大小

"datasets": [
        {
            "label": "零售额",
            "data": [100, 200, 300, 250, 450, 280], 
            "fill": false, 
            "borderColor": "#f00",
            "pointBackgroundColor":"#fff",
            "pointBorderColor":"#f00",
            "pointBorderWidth":2.5,
            "pointRadius":7,
            "lineTension": 0.1 
        }
]

Demo：http://jsrun.net/qxgKp

两个插件各有各的优势和缺点，chart.js可以自适应，比较适合H5页面，但是可以参考的文档比较少

 

y轴和x轴的单位名称写法

 

 上下左右距离写法：

 例子代码：

// 走势图
    var chart = function() {
        if($('#resultChart').length){
            var chartdata = $('#resultChart').data('source');
            var source = [];
            for(var key in chartdata){
                source.push({age: chartdata[key].age, value: chartdata[key].fen})
            }
            require(['ffsm-echarts'], function(echarts) {
                var myChart = echarts.init($('#resultChart').get(0));
                var option = {
                    // 图标位置设置
                    grid:{
                        top: 50,
                        bottom: 20,
                        left: '2%', // 与容器左侧的距离
                        right: '10%', // 与容器右侧的距离
                        containLabel:true
                    },
                    xAxis: {
                        name: '周岁',
                        type: 'category',
                        nameTextStyle: {
                            color: "#333",
                            align: "center",
                            padding: [0,0,0,-12],
                            fontSize:14
                        },
                        axisLine: {
                            symbol:['none','arrow'],
                            symbolSize: [8, 10],
                            symbolOffset: [0, 3],
                            lineStyle: {
                                color: "#ffcac8",
                                width: 2
                            }
                        },
                        axisTick: { show: false },
                        // 网格样式
                        splitLine: {
                            show: true,
                            lineStyle:{
                                color: ['#f7f7f7'],
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisLabel: {
                            color: "#333",
                            // margin: 2,
                            fontSize:14,
                        }
                    },
                    yAxis: {
                        name: "吉凶",
                        type: 'value',
                        min: 20,
                        max: 100,
                        nameTextStyle: {
                            color: "#333",
                            // backgroundColor: "#de2323",
                            fontSize: 14,
                            padding: [0,0,5,5],
                        },
                        axisLine:{
                            symbol:['none','arrow'],
                            symbolSize: [8, 10],
                            symbolOffset: [0, 3],
                            lineStyle:{
                                color:'#ffcac8',
                                width:2,
                            }
                        },
                        axisTick : {show: false},
                        // 网格样式
                        splitLine: {
                            show: true,
                            lineStyle:{
                                color: ['#f7f7f7'],
                                width: 1,
                                type: 'solid'
                            }
                        },
                        
                        axisLabel:{   //修改y轴的数据
                            color: '#333',
                            fontSize:14,
                            formatter: function (value) {
                                var texts = [];
                                if(value==20){
                                    texts.push('');
                                }else if (value>20 && value<=40) {
                                    texts.push('略差');
                                }else if (value>40 && value<=60) {
                                    texts.push('平平');
                                }else if(value>60 && value<=80){
                                    texts.push('小吉');
                                }else if(value>80 && value<=100){
                                    texts.push('大吉');
                                }
                                return texts;
                            }
                        },
                    },
                    series: [{
                        type: 'line',
                        smooth: false,//true 为平滑曲线，false为直线
                        lineStyle: { width: 2 },
                        encode: {
                            x: 'age',
                            y: 'value'
                        },
                        itemStyle : {  
                            normal : {  
                                // 设置折线折点颜色
                                color:'#c3312f', 
                                // 设置折线线条颜色 
                                lineStyle:{  
                                    color:'#c3312f'  
                                }  
                            }  
                        },  
                        symbol: 'circle',     //设定为实心点
                        symbolSize: 8,   //设定实心点的大小
                    }],
                    dataset: {
                        dimensions: ['age', 'value'],
                        source: source
                    }
                };
                myChart.setOption(option);
                $(window).resize(function() {myChart.resize();});
            });
        }
        
    }();

效果图