EChart的学习

工作需要，我当场学了一下，发现就是写写配置而已，并不麻烦，这里给出写修改的方法。其实各种图，echart都有各种演示，不需要特意的去记地址在这里
照着代码抄和改就完事但是改之前，要明白那些属性都是用来干啥的。实际上，echart就是用canvas写的一个画图工具，首先假设页面上有一个div，我们用echart.init初始化一个新的echart对象。接着我们给它传入一个JSON数组option，然后它通过解析将要输出的图表显示出来 这是该数组中各个属性值代表的意思

• title：用来写标题
  • text:标题的内容
  • show:标题是否显示
  • subtext:副标题
  • left：控制标题的位置，可以写'left','center','right'
• lengend:图例,不写内容写了lengend默认显示全部图例
  • text-style:改变字体样式
  • data:设置图例的数据
• grid:用来做整个表的布局
  • left,bottom,top,right:设置表格的上下左右边距
• XAxis,YAxis:坐标轴，XAxis就是x轴，YAxis就是Y轴
  • type:设置坐标轴类型，常用有以下值：'value','category','time'
  • data:设置坐标轴的刻度值，传入一个数组
• dataZoom:对于数据进行区域缩放
  • type:"slider"会在下方出现一个条，可以进行拖动时候区域缩放
  • realtime:拖动的时候，是否实时更新系列的图
  • top,left,bottom,right:做dataZoom的布局
• tooltip:提示框组件
  • trigger:触发类型。'item'，数据项图形触发，用在散点图，饼图等无类轴的图表中使用。'axis'，坐标轴触发，用在柱状图，折线图中
• seriers:系列列表。在echart中，提出了一个新的概念叫做系列来代表一种类型图
  • data:设置要展示的数据
  • type:展示的图的系列，常用的有"pie",'line','bar',分别是扇形图，线状图，柱形图
  • itemStyle:设置悬浮在单个数据点上的表现样式 最后，我们将新初始化的那个echart对象用setOption展示出来即可 接下来给出画出三种基础类型图的代码做参考

<div id="main" style="width: 600px;height:400px;"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.0/echarts.min.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    //这句话在文档中显示为
    // const main = document.getElementById("main")
    // const myChart = echarts.init(main)
    const myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    //折线图
    option = {
        title:{
            text:"这是折线图",
            left:"center"
        },
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
        }]
    };
    //柱状图
    option = {
        title:{
            text:"这是柱状图",
            left:"center"
        },
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
        }]
    };
    //扇形图
    option = {
        title: {
            text: '这是扇形图',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                type: 'pie',
                radius: '50%',
                data: [
                    {value: 1048, name: '搜索引擎'},
                    {value: 735, name: '直接访问'},
                    {value: 580, name: '邮件营销'},
                    {value: 484, name: '联盟广告'},
                    {value: 300, name: '视频广告'}
                ],
            }
        ]
    }

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