初次接触echarts感想

最新推荐文章于 2023-11-03 15:45:53 发布

alisaGreen

最新推荐文章于 2023-11-03 15:45:53 发布

阅读量820

点赞数

分类专栏： echarts 文章标签： echarts 初次接触感想总结

本文链接：https://blog.csdn.net/bluefish_flying/article/details/53488595

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天找了半天资料感觉收获甚少，但是还是想将自己的思路理一下，日后看的时候希望能记住更多，理得更清

刚开始看的时候，直接到官网看了教程，前面还基本认真后面就有点马虎了；看完教程大概知道怎么布置环境，怎么才能画出图形出来。后面以为就是各种复制模板图形就可以了，然后看了一下API和配置项手册，特别是配置项手册参数太多，但是也有规律可循，主要用到的也就几个；

先写个大纲，大概一个图形会包括哪些主要的参数

1、我后来接到的任务是写4个除了位置颜色数据不同其他参数都相同的柱状图，一个柱状图有两个数据重叠；刚开始有点懵逼，没有完全一样的实例；后面通过查询各种相关参数做出单个的柱状图和psd图有80%的相似度；

2、不先说细节，但后来问题出来了，怎么做4个呢，A、一个div写四个柱状图还是4个div写4个柱状图；B、代码的可复用性怎么复用，能不能像插件一样通过id就可以更改参数达到完美效果‘；这种效果目前也没有找到，但是就总结几个我看过的一些情况：

1、数据分离，将option中的数据提取出来放到data的数组或者是变量里面，变量里面用key的方式提取

var builderJson={

charts:{

'name':num

}

yAxis: [{
type: 'category',
data: Object.keys(builderJson.charts)

}],

series: [{
        type: 'bar',
        data: Object.keys(builderJson.charts).map(function (key) {
            return builderJson.charts[key];
        })
    }]

数组

var datas=[

[123],[456],[789]

]

series: [{
        type: 'bar',
        data:datas[0]
    }]

数组直接调用,

2、遍历画图可以通过for循环或者是for-each循环的方式将定义图形的时候的必须改变的变量设置为空数组var series=[],然后将这个数组放到循环里面，同时用push方法向里面添加需要的用到的实际的参数；后期定义option的时候通过将前面循环中的参数赋值给这里的参数，后面对这个div setOption(option);就可以了eg；模仿别人的一个div多个极坐标图形的案列，自己跟着写了一遍，极坐标需要算法，不然后面出来的图形不好看，我随便弄了一个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>极坐标</title>
    <script src="js/echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1200px;height:800px;"></div>
<script type="text/javascript">
    /*var echarts = require('echarts');*/
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var data = [];
    for(var i=0;i<2;i++){
        data[i]=[];
    }
    for (var i = 0; i <= 100; i++) {
        var t = i / 180 * Math.PI;
       /* var r = 5 * (1 + Math.sin(theta / 180 * Math.PI));*/
        data[0].push([Math.sin(2 * t) * Math.cos(2 * t), i %360]);
        data[1].push([Math.sin(4* t) * Math.cos(4 * t), i %360]);
    }
    var title=[];
    title.push("ρ=sin(θ*4/5)");
    title.push("ρ=sin(θ*4/5)");
    var polar=[];
    var angleAxis =[];
    var radiusAxis = [];
    var series=[];
    for(var i=0;i<2;i++){
        polar.push({
            center: [15 + 24 * (i % 4) + '%', (15+ 24 * Math.floor(i/ 4)) + '%'],
            radius:'26%'
        });
        radiusAxis.push({
            show: false,
            polarIndex:i,
            min: 0
        });
        angleAxis.push({
            polarIndex:i,//有多个图形的时候使用
            type: 'value',
            startAngle: 0
        });
        series.push({
            polarIndex: i,
            coordinateSystem: 'polar',
            name: title[i],
            type: 'line',
            showSymbol: false,
            label:{
                normal:{
                    show:true,
                    position:'bottom'
                }
            },
            data: data[i]
        })
    }
    option = {
        title: {
            text: '极坐标双数值轴',
            x:'center'
        },
        legend: {
            data: ['line']
        },
        polar: polar,
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
        },
        angleAxis: angleAxis,
        radiusAxis: radiusAxis,
        series:series
    };
    myChart.setOption(option);
</script>
</body>
</html>

3、通过在写代码的时候直接将参数写到数组中的方法也可以

eg:类似这样

title: [
    {//标题
        show: true,
        text: '现业A：',
        left: '20px',
        top: '10%',
        textStyle: {
            color: '#90fffe',
            fontSize: 30
        }
    },
    {//标题
        show: true,
        text: '现业B：',
        left: '60%',
        top: '10%',
        textStyle: {
            color: '#90fffe',
            fontSize: 30
        }
    },

4、有一个重写option的方法，但是感觉和重新定义一个option1没什么区别，这里我就舍弃了

5、legend图例的显示与隐藏（legend图例进入页面显示的个数）

legend: {
orient: 'vertical',
left: 'left',
data:['iphone3','iphone4','iphone5'],
selected: {
'iphone3' : false,
'iphone5' : false,
//不想显示的都设置成false
}
}

这里在selected里面的参数设置false即可

alisaGreen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初次接触echarts感想

今天找了半天资料感觉收获甚少，但是还是想将自己的思路理一下，日后看的时候希望能记住更多，理得更亲刚开始看的时候，直接到官网看了教程，前面还基本认真后面就有点马虎了；看完教程大概知道怎么布置环境，怎么才能画出图形出来。后面以为就是各种复制模板图形就可以了，然后看了一下API和配置项手册，特别是配置项手册参数太多，但是也有规律可循，主要用到的也就几个；1、我后来接到的任务是写4个除了
复制链接

扫一扫