ECharts使用

ECharts使用五部曲

1. 下载并引入ECharts.js
2. 准备一个具有大小的DOM盒子
3. 初始化实例对象
4. 指定配置项和数据（option）
5. 将配置项设置给ECharts实例对象

代码演示

 // 1.实例化对象
    let myChart = echarts.init(document.querySelector('.bar .char'))

 // 2.指定配置项和数据
    let option = {
        color: ['#2f89cf'],
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            top: '10px',
            left: '3%',
            right: '4%',
            bottom: '4%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: ['旅游行业', '游戏行业', '电商行业', '金融行业', '教师行业', '美术行业', '自媒体行业'],
            axisTick: {
                alignWithLabel: true
            },
            // 修改刻度标签
            axisLabel: {
                color: 'rgba(255,255,255,.6)',
                fontSize: '12'
            },
            // x轴样式不显示
            axisLine: {
                show: false
            }
        }],
        yAxis: [{
            type: 'value',
            // 修改y轴刻度
            axisLabel: {
                color: 'rgba(255,255,255,.6)',
                fontSize: '12'
            },
            // 修改y线条样式
            axisLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)",
                    // width: '1',
                    // type: "solid"
                }
            },
            // y 轴分隔线样式
            splitLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)"
                }
            }
        }],
        series: [{
            name: '直接访问',
            type: 'bar',
            barWidth: '35%',
            data: [200, 600, 1200, 800, 900, 600, 1100],
            itemStyle: {
                // 修改柱子圆角
                barBorderRadius: 5
            }
        }]
    };

 // 3.把配置项给实例对象
    myChart.setOption(option);

最后的效果图：

• 可通过echarts官网查看。
• 附上一个自己最近学习做的可视化小页面。
  http://shizi33.web3v.vip/