【前端数据可视化】vue中使用Echarts的自定义主题

Echarts官网Echarts官网

环境搭建小提示

1. 使用vue-cli创建一个vue项目:

vue create learn-echarts

2. 安装Echarts运行时依赖:

npm install echarts --save

1. 在Vue中使用Echarts给如何自定义主题？

1. 通过主题构建工具 ：主题构建工具；

2. 在主题构建工具中创建一个主题并下载主题的*.js文件。将下载好的js文件放到 node_modules\echarts\theme 下，在需要使用的地方进行引用即可。

    // 引入主题
    import darkBold from 'echarts/theme/dark-bold'

    import purplPassion from 'echarts/theme/purple-passion'

3. 使用主题: 使用主题中的名称需要是引入JS文件中注册的名称，可以查看该文件找到注册名称；echarts.registerTheme('purple-passion', {})

// 2. 初始化
 const chart = echarts.init(chartDom, 'purple-passion', {renderer: 'svg'})

2. 修改Echarts的渲染模式为 SVG

1. 默认情况下的ECcharts是被加载为canvas的，需要修改其渲染模式:

const chart = echarts.init(chartDom, 'purple-passion', {renderer: 'svg'})

3. 简单小DEMO

1. HTML

<template>
    <div class="eChart-init">
        <div id="chart">
        </div>
    </div>
</template>

2. JavaScript

import * as echarts from 'echarts'
    // 引入主题
    import darkBold from 'echarts/theme/dark-bold'

    import purplPassion from 'echarts/theme/purple-passion'

    export default {
        name: "index",
        data() {
            return {
                vintageTheme: vintage,
            }
        },
        methods: {

            /**
             * 初始化图表
             */
            init() {
                console.log(this.vintageTheme)
                /**
                 * 自定图表主题
                 * @type {Element}
                 *  1. https://echarts.apache.org/zh/theme-builder.html 使用主题构建工具自定义主题
                 */

                /**
                 * 当前图标默认的渲染方式是canvas
                 * 修改渲染方式为SVG
                 * 在第三个参数上传递 {renderer:svg}
                 * @type {Element}
                 * 频繁的进行更新动画建议使用canvas
                 * 如果是大屏展示需要使用svg
                 */

                    // 1. 获取需要渲染的DOM
                const chartDom = document.querySelector("#chart")
                // 2. 初始化
                const chart = echarts.init(chartDom, 'purple-passion', {renderer: 'svg'})
                // 3. 设置 option
                chart.setOption({
                    title: {
                        text: 'ECharts图标入门'
                    },
                    xAxis: {
                        data: ['食品', '数码', '服饰', '箱包']
                    },
                    yAxis: {},
                    // 系列
                    series: {
                        type: 'bar',
                        data: [100, 200, 150, 300],
                        // color:'#fe7402'
                    }
                })
            }
        },
        mounted() {
            this.init()
        }
    }

3. CSS

 #chart {
        width: 400px;
        height: 400px;
    }