uni-app 使用echarts图表插件步骤（柱状）

矫情吗；* 2022-12-06 15:49 638阅读 0赞

一、去插件市场下载插件：[https://ext.dcloud.net.cn/plugin?id=1668][https_ext.dcloud.net.cn_plugin_id_1668]

二、把components和static里面的文件复制到自己的项目中:（如果你的图表不显示，肯定是忘记了static文件的js）

![20200914113944890.png][]

三、使用：

<template>
    	<view>
    		<echarts :option="option" style="height: 300px;" @click="echartsClick"></echarts>
    		<echarts-el :option="option" style="height: 300px;"></echarts-el>
    		<button @click="updateClick">切换数据</button>
    	</view>
    </template>
    
    <script>
    import Echarts from '@/components/echarts/echarts.vue'
    import EchartsEl from '@/components/echarts/echarts-el.vue'
    export default {
    	data() {
    		return {
    			option: {},
    			option2: {
    				notMerge: true, // 自定义变量：true代表不合并数据，比如从折线图变为柱形图则需设置为true；false或不写代表合并
    				tooltip: {
    					trigger: 'axis',
    					positionStatus: true,
    					formatterStatus: true, // 自定义变量：是否格式化tooltip，设置为false时下面三项均不起作用
    					formatterUnit: '元', // 自定义变量：数值后面的单位
    					formatFloat2: true, // 自定义变量：是否格式化为两位小数
    					formatThousands: true // 自定义变量：是否添加千分位
    				},
    				legend: {
    					data: ['邮件', '手机']
    				},
    				grid: {
    					left: '5%',
    					right: '8%',
    					bottom: '5%',
    					containLabel: true
    				},
    				xAxis: [
    					{
    						type: 'category',
    						data: ['周一', '周二', '周三', '周四', '周五']
    					}
    				],
    				yAxis: [
    					{
    						type: 'value'
    					}
    				],
    				series: [
    					{
    						name: '邮件',
    						type: 'bar',
    						data: [120, 132, 101, 134, 90],
    						// 自定义变量，以数组形式传递渐变参数
    						linearGradient: [0, 0, 0, 1,
                            [
                                {offset: 0, color: '#2378f7'},
                                {offset: 0.7, color: '#2378f7'},
                                {offset: 1, color: '#83bff6'}
                            ]]
    					},
    					{
    						name: '手机',
    						type: 'bar',
    						data: [220, 182, 191, 234, 290],
    						// 自定义变量，以数组形式传递渐变参数
    						linearGradient: [0, 0, 0, 1,
                            [
                                {offset: 0, color: '#0bac00'},
                                {offset: 0.7, color: '#0dcb00'},
                                {offset: 1, color: '#0fef00'}
                            ]]
    					}
    				]
    			},
    			option3: {
    				notMerge: true, // 自定义变量：true代表不合并数据，比如从折线图变为柱形图则需设置为true；false或不写代表合并
    				xAxis: {
    					type: 'category',
    					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    				},
    				yAxis: {
    					type: 'value'
    				},
    				series: [
    					{
    						data: [120, 200, 150, 80, 70, 110, 130],
    						type: 'bar',
    						showBackground: true,
    						backgroundStyle: {
    							color: 'rgba(220, 220, 220, 0.8)'
    						}
    					}
    				]
    			}
    		};
    	},
    	components: {
    		Echarts,
    		EchartsEl
    	},
    	onLoad() {
    		this.option = this.option2
    	},
    	methods: {
    		/**
    		 * 点击事件
    		 * @param {Object} params
    		 */
    		echartsClick(params) {
    			console.log('点击数据', params)
    		},
    		/**
    		 * 切换数据
    		 */
    		updateClick() {
    			if (this.option === this.option2) {
    				this.option = this.option3
    			} else {
    				this.option = this.option2
    			}
    		}
    	}
    };
    </script>
    
    <style></style>

效果图：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI4NTI1MA_size_16_color_FFFFFF_t_70][]

四、如果想要其他样式图表，可根据echarts官网样例：[https://echarts.apache.org/examples/zh/index.html][https_echarts.apache.org_examples_zh_index.html]

替换项目里面的option值其他不变，自己随意的更改图表样式

[https_ext.dcloud.net.cn_plugin_id_1668]: https://ext.dcloud.net.cn/plugin?id=1668
[20200914113944890.png]: /images/20221123/03be347327bb45eaad79ca00362a2aee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI4NTI1MA_size_16_color_FFFFFF_t_70]: /images/20221123/90cb749305504cc0b1e1161d894c107e.png
[https_echarts.apache.org_examples_zh_index.html]: https://echarts.apache.org/examples/zh/index.html