主题构建

主题在线构建：echarts.baidu.com/theme-build… ，选择配色等，导出配置json

使用配置文件

kit/charts.js

let echarts = require( 'echarts/lib' );
let themeJson = require('./echartsTheme/qube.json');
echarts.registerTheme('qube', themeJson.theme);

kit/echartsTheme/qube.json

{
    "version": 1,
    "themeName": "essos",
    "theme": {...省略}
}

使用：

drawChart () {
    import('$kit/charts').then(({ 'default': echarts }) => {
        this.commonChart = echarts.init(
            document.getElementById(this.chartData.id),
            'qube' // 与registerTheme定义名字保持一致
        );
    });
}

其中，qube.json为官网导出的json文件

常用配置

• tooltip提示框样式

tooltip: {
    trigger: 'axis',
    axisPointer: {
        type: 'line'
    },
    backgroundColor: '#FFFFFF', // 提示框背景颜色
    textStyle: { // 字体颜色
        fontSize: 14,
        color: '#000',
        fontWeight: '500'
    },
    extraCssText: 'box-shadow: 0 3px 15px 3px rgba(51, 51, 51, 0.1);' // 提示边框加阴影
}