echarts在项目中的应用

背景:

1.目前想做一个API自动化测试的平台

echarts在项目中的应用

2.首页的展示希望用数据进行说明

2.1 echart

Echarts--商业级数据图表

商业级数据图表，它是一个纯JavaScript的图标库，兼容绝大部分的浏览器，底层依赖轻量级的canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

Echarts支持的图表？　

折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）

雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表

echarts和chart对比

echarts的优点：
1.国人开发，文档全，便于开发和阅读文档。
2.图表丰富，可以适用各种各样的功能。
echarts的缺点：
移动端使用略卡，毕竟是PC端的东西，移植到移动端肯定多多少少有些问题吧，或许跟自己水平也有一定的关系，哎怎么说呢。
echarts不失为一款比较适合我们这种码农使用的框架。
echarts就不贴代码了。毕竟文档很全。
chart.js优点：
1.轻量级，min版总大小50多k。
2.移动端使用比较流畅，毕竟小。
chart.js缺点：
1.功能欠缺比较多。
2.中文文档奇缺。

2.2应用

  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
         <!-- 引入主题 -->
         <script src="https://www.runoob.com/static/js/wonderland.js"></script>
        <!--另外一个主题颜色-->
        <script src="{% static 'js/echarts/macarons.js' %}"></script>
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'),'macarons');
    // 指定图表的配置项和数据
    var option = {
        color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
        textstyle:{
            color: "#fff" ,
        },
        title: {
            text: 'ECharts',
        },
        aria: {
            show: true
        },
        tooltip: {
            show:true,
            trigger:'item',
            axisPointer:['line']

        },
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'effectScatter',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

2.3扩展

里面介绍了echart var option = {}可以设置的属性有哪些包括怎么设置每个二级属性的设置超详细 https://echarts.apache.org/zh/option.html#series

3.完结