ucharts图表的一些常用配置

常见配置：

/**
 * 折线图配置
 **/

const lineOpts = {
	color: ["#FF6853", "#377AFA", "#35C724", "#FAC858", "#EE6666"],//主题颜色，16进制颜色格式
	padding: [10, 20, 10, 10],//画布填充边距，顺序为上右下左，例如[10,15,25,15]
	dataLabel: false,//数据点上的文本显示
	dataPointShape: false,//是否显示数据点的图形标识
	enableScroll:true,//是否可滚动
	legend: { //图例
		position: "top",
		float: "right",
		fontColor:"#333",
	},
	xAxis: {
		disableGrid: true, //不绘制网格
		labelCount:9,//数据点文字（刻度点）单屏幕限制显示的数量
		rotateLabel:true,//【旋转】数据点（刻度点）文字
		itemCount:1440,//单屏数据密度即图表可视区域内显示的X轴数据点数量，仅在启用enableScroll时有效
		fontColor:"#999"
	},
	yAxis: {
		gridType: "dash", //横向向网格线型，可选值：'solid'实线,'dash'虚线
		dashLength: 2, //横向网格为虚线时，单段虚线长度
		showTitle: true, //不绘制Y轴标题
		data: [{
			title: "MW",//纵轴标题
			titleOffsetY: -10, //标题纵向偏移距离，负数为向上偏移，正数向下偏移
			fontColor:"#999",
			titleFontColor:"#999",
		}]
	},
	extra: {
		line: {
			type: "curve"//折线图类型，可选值："straight"尖角折线模式,"curve"曲线圆滑模式,"step"时序图模式
		},
		tooltip: { //提示窗
			showArrow: false,//是否显示箭头
			borderRadius: 4,//圆角大小
			bgOpacity: 0.6,//背景色透明度
		}
	}
}

export default lineOpts;

在uni-app中的引入步骤

1. 在common目录下，创建opts.js文件

2. 申明一个配置对象，并且通过export，暴露出去

3. 在需要用到的地方import引入

    import opts from '@/common/opts.js' // 引入图表配置文件
   

4. 组件标签中填写opts标签属性

    <qiun-data-charts type="line" :opts="opts" :ontouch="true" :canvas2d="true" :onzoom="true" :chartData="chartData" />
   

5. 在data数据中赋值

    data() {
    	return {
    		···
    		opts:opts, // 配置图表样式
    		chartData: {},
    		···
    	}
    },