Echarts使用相关记录

一        Echarts的引入

注: 仅讨论搭档已经引入过一次的情况

在相应组件<script>标签中写入即可, 不用配置其他

import * as echarts from 'echarts'

二        使用Echarts图表的步骤

1        在<div>中写入, 通过id进行绑定, 通过 :style绑定图表样式

<div id="myChart" :style="myChartStyle"/>

class属性写不写都不影响

2        在data--return中写入id的空对象,我猜测是初始化数据

<script>
    export default {
        data() {
            return {
                myChart {},   // 这里的 myChart与id相对应
                
                // myChartStyle与 :style相对应, 100%表示撑满父元素
                myChartStyle: { float: 'left', width: '100%', height: '100%'},    
            }
        }
    }
</script>

3        在mounted中挂在方法, 例如我这个echart的方法名字叫 initEcharts

mounted() {
    this.initEcharts()
}

当然,如果要加入定时器等,写法会有所改变--把this.xxx放到定时器里

setTimeout(    ,()=>{
    this.initEcharts()
},1000)

4        在methods中写入方法:

methods: {
    initEcharts() {
        const option = {
            // 中间可定义题目 横纵坐标 图标样式的细节 写死的数据等(在下一个标题中展开讲)
        }
        // 这里this取到的 myCart, 字符串'myChart', 都是和<div>中的id相对应的
        // init是写入, document.getElementById是操作dom的方法,取到相应id
        this.myChart = echarts.init(document.getElementById('myChart'))
    
        // myChart同样也是id值, option与const后的option相对应
        // setOption是绘制图表的意思
        this.myChart.setOption(option)

        // 还可以把图表画成响应式的, myChart同样是id值
        window.addEventListener('resize', () => {
        this.myChart.resize()
      })
    }
}

5        如果想模拟动态数据, 在data--return中写入, 用josn格式

// 待补充

三        const option中的配置项和数据

option = {}中的花样挺多的, 我还没有完全摸透, 先列举出几种用过的配置:

// 以下代码都是写在 const option = {}花括号里面的

title: {
    text: ''    // 定义标题的文字
    // 文字可以设置样式
    textStyle: {
        color: ''    // 文字颜色
        fontStyle: ''    // 字体风格
        fontWeight: ''   // 字体粗细
        fontFamily: ''    // 字体系列
        fontSize: ''    //字体大小
    },
    
    // 网格布局(在宽高响应式不生效的情况下,可以考虑grid布局,特别好用)
    grid: {
        top: '',
        bottom: '',
        left: '',
        right: ''
    },

    // 设置横坐标轴
    xAxis: {
        // 坐标轴刻度下的字符
        data: ["", ""]    // 以数组包含字符串的形式定义
        
        // 设置坐标轴数据显示的范围(这里的变化可以有很多,就不一一说明了)
        min
        max

        // 设置坐标轴上某个元素的隐藏 / 显示 (如果都不写, 默认显示)
        axisTick: {
            show:false // 不显示坐标轴刻度线
        },
        axisLine: {
            show: false, // 不显示坐标轴线
        },
        splitLine:{
            show:false // 不显示网格线
        },
        axisLabel: {
            show: false, // 不显示坐标轴上的文字
        },

        // 自适应
        scale: true,
    },

    // 设置纵坐标轴(与横坐标类似)
    yAxis: {
    },

    series: [
        {
            // 有点多, 放下一标题讲
        }
    ]
}

当然, option这个名称的可以变的, 改为option1, option2 并不影响什么, 只要setOption后括号里的名称能对应上就行

四        series里面的配置项

series: [
    {
        name: '',    // 数据列的名称
        type: 'line',    // 指定图表的类型, 这里以折线图为例
        data: [1, 2, 3...],    // 配置图表的数据, 注意这里不是字符串形式
        smooth: true,    // 直线变为平滑的曲线
        // 配置单个数据项的样式
        itemStyle: {
            // 线条的样式
            lineStyle: {
                color: ''
            }
        },
        // 标签配置
        label: {
        },
        // 面积图中面积部分的样式
        areaStyle: {
        }
    }
]

附链接: 更详细的配置项  ECharts 的 series 配置项主要有以下几种 - 虎虎生威啊 - 博客园 (cnblogs.com)