echarts基本使用&常见配置项说明

做前端开发经常遇到echarts图表的使用,这里将对echarts的简单基本运用及常见配置项进行说明
1.基本使用

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    
    <script src="./echarts.js">script>
head>
<body>
    
    <div id="main" style="width: 600px;height:400px;">div>

    <script type="text/javascript">
        //3. 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '班长的女票们'
            },
            tooltip: {},
            legend: {
                data:['数量']
            },
            xAxis: {
                data: ["一月份","二月","三月","四月","五月","六月","七月"]
            },
            yAxis: {},
            series: [{
                name: '数量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20,1]
            }]
        };

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

2.常见配置项说明

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <script>
        //option配置项的学习
        //1. 直接查看配置项手册
        //2. 去官方实例中查看

        //1.title 标题
        //  text
        //  textStyle
        //  left top right bottom
        //2.legend 图例组件
        //  type  值:  plain  scroll
        //  show  是否显示
        //  top right bottom left  
        //  width  height 
        //  textStyle
        //3.grid
        //  left top right bottom   类似于padding    
        //  width height  组件宽高
        //4.xAxis x轴相关的
        //  data x轴的数据
        //  axisLine 对象
        //     show  是否显示坐标轴轴线
        //     lineStyle 对象
        //        color 轴线颜色
        //        opacity 轴线透明度
        //  axisTick 对象
        //     show  是否显示刻度线
        //     lineStyle 对象
        //        color 刻度线的颜色
        //  axisLabel 对象
        //     show  是否显示轴文本
        //     color 轴文本颜色
        //     fontSize  轴文本字体大小
        //  splitLine 对象
        //     show 是否显示x轴的分割线
        //     lineStyle 对象
        //        color 分割线的颜色
        //5.yAxis y轴相关的
        //6.tooltip 对象
        //    show 是否显示提示框组件
        //7.toolbox 工具栏
        //    show 是否显示工具栏
        //    feature 各工具配置项
        //         dataZoom 数据区域缩放
        //         dataView 数据视图
        //         magicType 动态类型切换
        //         restore 重置刷新
        //         saveAsImage 导出图片
        //8.series 系列列表
        //  line  线性图
        //  bar   柱状图
        //  pie   饼图
        //  每一个类型的图表里都有一个itemStyle
        //9.color 调色盘颜色列表
        //  默认有一个调色盘颜色
        //10.backgroundColor 背景色
    script>
body>
html>

该文章主要为echarts的简单说明,方便自己查询使用.具体配置详见对应官方文档echarts官网

你可能感兴趣的:(echarts)