Echarts 的使用

引入

CDN

直接在 html 引入 <script scr='path/to/echarts.min.js'></script>，然后使用全局变量 window.echarts

webpack

yarn add echarts

yarn add --dev @types/echarts

import echarts from 'echarts' 或者 var echarts = require('echarts')

然后使用 echarts即可

常用配置

options = {
	tooltip: {  //提示框
        show: true | false,  //是否展示
        triggerOn: 'click'| 'mousemove' | 'click | mousemove' | 'none',  //提示框触发的条件
        formatter: '{c}',  //提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
        position: 'top' | 'bottom',  //提示框位置
        alwaysShowContent: true | false  //是否总是显示提示框
    },
    xAxis：{  // X轴
    	show: true | false,
        position: 'top' | 'bottom',
        type: 'value' | 'category' | 'time' | 'log',  //X轴类型 数值轴 | 类目轴 | 时间轴 |  对数轴
        name: 'xxx',  //X轴名称
        nameLocation: 'start' | 'middle/center' | 'end',  //X轴名称位置
        axisLine: {
        	show: true,
            lineStyle: {  //X轴的样式
        		color: "rgba(220, 43, 43, 1)"
                width: 1
      		}
        },
        axisTick: {  //X轴刻度相关设置
        	show: true,
            alignWithLabel:true,  //刻度线和标签对齐
            inside: true, //刻度是否朝内
            length: 5,  //刻度的长度
            lineStyle: {  //刻度线相关设置
        		width: 0.5,
                color: 'red',   
      		}
        },
        axisLabel:{  //标签相关
        	show: true,
            margin: 8,  //标签与轴线的距离
            color: 'red',  //标签文字颜色
            fontSize: 12,  //字体大小
        },
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
   	},
    yAxis：{  //Y轴
    	//和X轴相同
    }，
    title: {  //标题
    	show: true,
        text: 'xxx',  //标题名称
        textStyle:{  //标题样式
        	color: 'red',
            fontStyle: 'normal' | 'italic' | 'oblique',   //主标题文字字体的风格
            fontWeight: 'normal' | 'bold' | 'bolder' | 'lighter' | 100,  //主标题文字字体的风格
            fontFamily: 'sans-serif',  //主标题文字字体系列
            fontSize: 18
        },
        textAlign: 'auto' | 'left' | 'right' | 'center',   //标题文字对齐方式
        left: 10,  //主题离容器左侧的距离
        backgroundColor: 'red'  //标题背景颜色
    },
    legend: {
    	show: true,
        data: [
        	{name: '系列1', icon: 'circle', textStyle: {color: 'red'}},
            {name: '系列2', icon: 'circle', textStyle: {color: 'blue'}}
        ]
    },
   	series: [  //系列列表
    	{
        	type: 'line' | 'bar' | 'Pie',  //图表类型
        }
    ]
}

更多详细配置 可查看 Echarts 术语速查手册