基础代码都一样，根据配置的seriesDta的type不同，展现出的效果不同，每一个echarts都对应单独的series
版本不同可能实现效果不同，具体查看官网哦。
安装：
npm install echarts --save
引入：
在main.js中引入：
import echarts from 'echarts'Vue.prototype.$echarts = echarts
绘制图表：（我这里封装成组件使用）
<template><div :id="id"></div></template><script>export default {props: {id: {type: String,default: () => ''}},methods: {// 柱状图 // seriesDta 配置数据// max y轴最大值// data x轴数据// textcolor y轴文字颜色 是否显示双y轴// isX x轴是否从0刻度开始// isResize x轴文字是否倾斜// isShowXtext 是否显示x文字和刻度histogram(id, seriesDta, interval, max, data, textcolor, isX, isResize, isShowXtext) {let percentage = 100// isResize x轴文字是否倾斜if (isResize) {let num = data.length; // X轴的数量 percentage = 7 / num * 100 //数据窗口范围的结束百分比0-100}let evaluation = this.$echarts.init(document.getElementById(id))evaluation.setOption({grid: {top: '6%',bottom: '3%',left: '3%',width: '96%',containLabel: true},legend: {x: 'right',data: [],// selected: {// 'name1': false,// 'name2': false // 图例的显示与隐藏 隐藏设置为false// },textStyle: {color: '#fff',fontSize: 12,padding: [0, 40, 0, 5],},padding: [35, 200, 0, 0],},dataZoom: [ // 设置x轴内部滚动条{type: 'inside',//有单独的滑动条，slider用户在滑动条上进行缩放或漫游。inside是直接可以是在内部拖动显示show: true,//是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。start: 0,end: percentage, //数据窗口范围的结束百分比0-100xAxisIndex: [0],zoomLock: true // 设置之后只能拖动不能缩放},],xAxis: {type: 'category',offset: 0,axisTick: { //坐标轴刻度相关设置show: isShowXtext ? false : true, //是否显示坐标轴刻度。},axisLine: {show: true,lineStyle: { color: 'rgba(255, 255, 255,0.09)' }},position: "bottom",axisLabel: {show: isShowXtext ? false : true,interval: 0, // 坐标轴刻度标签的显示间隔(在类目轴中有效)，默认会采用标签不重叠的方式显示标签（也就是默认会将部分文字显示不全） 可以设置为0强制显示所有标签，如果设置为1，表示隔一个标签显示一个标签，如果为3，表示隔3个标签显示一个标签，以此类推rotate: isResize ? 40 : '', //标签倾斜的角度，在类目轴的类目标签显示不全时可以通过旋转防止标签重叠（官方这样说的）旋转的角度是-90到90度 问题又来了，这个名称x轴的文字如果太长会受到遮挡，还是显示不全，这个时候可以用grid属性解决textStyle: { color: 'rgba(230,243,255,0.8)' },},boundaryGap: isX ? false : ['10%', '10%'], // false x 从0刻度开始data: data},yAxis: [{type: 'value',min: 0,//坐标轴刻度最小值。可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。不设置时会自动计算最小值保证坐标轴刻度的均匀分布。在类目轴中，也可以设置为类目的序数max: max,interval: interval, // 等分间隔 scale: true,axisLine: {lineStyle: {color: 'rgba(255,255,255,.1)'}},axisTick: { //坐标轴刻度相关设置show: false, //是否显示坐标轴刻度。},axisLabel: {interval: "auto",textStyle: {color: textcolor ? textcolor : 'rgba(230,243,255,0.8)' // 单独设置y轴文字颜色},},splitLine: { //坐标轴在 grid 区域中的分隔线。show: true, //是否显示分隔线。默认数值轴显示，类目轴不显示。interval: "auto", //坐标轴分隔线的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：lineStyle: { color: 'rgba(255, 255, 255,0.2)' }},}, { // 双y轴type: 'value',axisLabel: {show: true,interval: 'auto',formatter: '{value} %',textStyle: {color: 'rgba(230,243,255,0.8)'}},axisLine: {lineStyle: {color: 'rgba(255,255,255,.1)'}},splitLine: { //坐标轴在 grid 区域中的分隔线。show: true, //是否显示分隔线。默认数值轴显示，类目轴不显示。interval: "auto", //坐标轴分隔线的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：lineStyle: { color: 'rgba(255, 255, 255,0.2)' }},show: textcolor ? true : false // 是否显示第二个y轴}],series: seriesDta,tooltip: { // 提示设置trigger: "axis",formatter: function (params) {let str = "<span style='font-size:12px'>" + params[0].name + "</span>" + "<br />";params.forEach((item) => {str += "<span style='font-size:12px'>" + item.seriesName + " : " + item.value + "</span>" + "<br />";});return str;},backgroundColor: "rgba(5,11,26,0.90)",borderColor: "rgba(5,11,26,0.90)",textStyle: {color: '#E6F3FF',fontWeight: '400',fontSize: '12px'},}});window.onresize = function () {evaluation.resize() // 大小自适应}},}}</script><style lang="scss" scoped></style>
效果1:柱状图渐变色+x轴可以拖动+双y轴
dataZoom 可以设置x轴内置滚动条，如上代码
使用show设置显示双y轴，但是series 配置数据不设置yAxisIndex：1，第二根y轴上就不会有数据，如图：
柱状图： type: 'bar'
代码：
引入组件后：
<div class="histogram-box1"><theCharts id="histogramBox1" ref="histogramBox1" style="width: 100%;height:100%;"></theCharts></div>
mounted() {this.$refs.histogramBox1.histogram("histogramBox1", this.evaluationData, 25, 100, this.xData1, 'rgba(230,243,255,0.8)', false, true) // 柱状图}
样式：
.histogram-box1 {margin-top: 100px;width: 600px;height: 400px;}
数据：需要设置渐变色时，需要单独引入echarts
evaluationData 是配置的series
import * as echarts from 'echarts';
data(){return {xData1: ["name1", "name2", "name3", "name4", "name5", "name6", "name7", "name8", "name9"],// x轴数据evaluationData: [{name: 'blue',type: 'bar',barWidth: 10,itemStyle: {color:new echarts.graphic.LinearGradient(0, 0, 0, 1,[{ offset: 0, color: 'rgba(100,118,245,.8)' }, //柱图渐变色{ offset: 1, color: 'rgba(100,118,245,0.00)' }, //柱图渐变色])},data: [10, 30, 40, 30, 50, 60, 77, 88, 99]}, {name: 'green',type: 'bar', barWidth: 10, itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{ offset: 0, color: 'rgba(10,255,160,0.8)' }, //柱图渐变色{ offset: 1, color: 'rgba(10,255,160,0)' }, //柱图渐变色])},data: [40, 55, 77, 66, 50, 64, 70, 89, 72]},],}}
效果2：折线图填充渐变色
areaStyle 属性改变区域颜色，
symbolSize: 8, // 设置拐点大小
showSymbol: false, // 不显示拐点
itemStyle 设置线条样式、鼠标移入时折线拐点样式
代码：
引入组件后：
<div class="histogram-box1"><theCharts id="histogramBox2" ref="histogramBox2" style="width: 100%;height:100%;"></theCharts></div>
mounted() {this.$refs.histogramBox2.histogram("histogramBox2", this.histogramBox2Data, 5, 30, this.xData2, 'rgba(230,243,255,0.8)', true, false) // 折线图}
data(){return{xData2: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],histogramBox2Data: [{name: 'name',type: 'line',// smooth: false,symbol: 'circle',symbolSize: 3,showSymbol: false,yAxisIndex: 0,data: [13, 9, 11, 12, 13, 11, 10, 9, 6, 5, 9, 8],areaStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{ offset: 0, color: 'rgba(104,104,230,1)' }, //区域渐变色{ offset: 1, color: 'rgba(104,104,230,0.00)' },]) //改变区域颜色}},itemStyle: { //设置鼠标移入样式label: { show: true }, color: 'rgba(104,104,230,1)',borderColor: 'rgba(104,104,230,0.4)',borderWidth: 7,},},],}}
效果3：不显示x轴文字和刻度，双y轴
折线数据设置属性yAxisIndex：1，对应数据显示在第二根y轴上，如图：
引入组件后：
<div class="histogram-box1"><theCharts id="histogramBox3" ref="histogramBox3" style="width: 100%;height:100%;"></theCharts></div>
mounted() {this.$refs.histogramBox3.histogram("histogramBox3", this.histogramBox3Data, 100, 500, this.xData2, 'rgba(230,243,255,0.8)', false, true, true) // 双折线图 双y轴}
data(){return{xData2: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],histogramBox3Data: [{name: '数量1',type: 'bar',barWidth: 8,itemStyle: {color:new echarts.graphic.LinearGradient(0, 0, 0, 1,[{ offset: 0, color: 'rgba(100,108,235,.8)' }, //柱图渐变色{ offset: 1, color: 'rgba(100,108,235,0.00)' }, //柱图渐变色])},data: [100, 240, 280, 270, 280, 190, 120, 277, 244, 220, 281, 218],yAxisIndex: 0,}, {name: '数量2',type: 'bar', barWidth: 8, itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{ offset: 0, color: 'rgba(205,109,35,0.80)' }, //柱图渐变色{ offset: 1, color: 'rgba(205,109,35,0.00)' }, //柱图渐变色])},data: [118, 120, 270, 180, 200, 180, 120, 277, 244, 140, 233, 222],yAxisIndex: 0, // y轴下标},{name: '占比1',type: 'line',// smooth: false,symbol: 'circle',symbolSize: 3,showSymbol: false,data: [200, 340, 480, 270, 280, 290, 420, 377, 344, 320, 381, 318],itemStyle: {label: { show: true }, color: 'rgba(100,108,235,.8)',borderColor: 'rgba(100,108,235,.4)',borderWidth: 7,},yAxisIndex: 1,}, {name: '占比2',type: 'line',// smooth: false,symbol: 'circle',symbolSize: 3,showSymbol: false,data: [318, 320, 270, 480, 400, 380, 420, 377, 344, 340, 333, 222],itemStyle: {label: { show: true }, color: 'rgba(205,109,35,0.80)',borderColor: 'rgba(205,109,35,0.40)',borderWidth: 7,},yAxisIndex: 1,}],}}
其他：
设置折线弧度：在series数据里面设置：smooth: 0.5 // 设置折线弧度，取值：0-1之间
多个echarts先清除一下：
echarts.init(document.getElementById(this.id)).dispose();
