我们在做项目的时候会技术选型（如果老板或者甲方指定用哪个那就没办法），目前国内好像最流行的可视化图表工具就echarts和highcharts，也能满足大部分需求。echarts底层为canvas，highcharts底层为svg。
highcharts优点：1.轻量级，移动端使用比较流畅，毕竟小2.基于svg，对于动态的增删节点数据非常灵活，不需要重新绘图3.兼容性好，官方说兼容到IE6。
echarts优点：1.不收费2.国人开发，便于开发和阅读文档。3.功能丰富，可以满足大部分开发。
echarts底层用cavan，也就是cavan底层有优缺点1.依赖分辨率不支持事件处理器2.弱的文本渲染能力3.能够以.jpg、.png格式保存结果图像4.最适合图像密集型的游戏，其中的许多对象会被频繁重绘
同理，highcharts底层用svg，1.不依赖分辨率2.支持事件处理器3.最适合带有大型渲染区域的应用程序（如谷歌地图）4.复杂度高会减慢渲染速度（任何过度使用DOM的应用都不快）5.不适合游戏应用
以上纯粹是借鉴别人的话，其实随便看看了解一下就行了，一般技术选型都订好了。
第一、安装
//安装npminstallhighcharts-vue第二步、注册
//全局注册importVuefrom'vue'importHighchartsVuefrom'highcharts-vue'//其他项目代码省略//vue2用Vue.use(HighchartsVue)//vue3用app.use(HighchartsVue)//局部注册的话就需要引入指定的组件当中//若仅用于特定组件，请使用局部注册方法。首先，您应该从组件文件中的Highcharts-Vue包中导入Chart组件对象：import{Chart}from'highcharts-vue'//然后，您需要在Vue实例配置中注册它，即在components部分中{components:{highcharts:Chart}}第三步、配置
//这是vue2中newVue({data(){return{chartOptions:{series:[{data:[1,2,3]//sampledata}]}}}})//这是vue3中import{ref}from"vue"constchartOptions=ref({chart:{type:'spline',backgroundColor:'#0b1c2e',//width:400,height:220},title:{text:null},xAxis:{},yAxis:{},plotOptions:{},tooltip:{},legend:{},credits:{enabled:false},series:[]})第四步、自己在使用过程中遇到的一些问题或者小坑
我们在使用图表的时候可以查看官方文档deno，基本的图表都是可以直接用vue-highcharts插件实现的，但是使用其他额外的图表或者地图的时候需要额外引入第三方库，例如我就是在使用金字塔三角pyramid和可变半径饼图variablepie的时候额外引入了第三方库，如下示例，（这个是要看官方demo示例那边的js代码引入什么库我们这边就引入什么库）
import{createApp}from'vue'importAppfrom'./App.vue'//引入highchartsimportHighchartsVuefrom'highcharts-vue';importHighchartsfrom"highcharts";//引用所需外部资源importHighcharts3dfrom"highcharts/highcharts-3d";importexportingfrom"highcharts/modules/exporting";importfunnelfrom"highcharts/modules/funnel";importvariablepiefrom'highcharts/modules/variable-pie'importfunnel3dfrom"highcharts/modules/funnel3d";importcylinderfrom"highcharts/modules/cylinder";importpyramid3dfrom"highcharts/modules/pyramid3d";importexportingInitfrom'highcharts/modules/exporting'importHighchartsMorefrom'highcharts/highcharts-more';importHighchartsDrilldownfrom'highcharts/modules/drilldown';并且个人在项目过程中遇到一个问题，是有关于npm和pnpm的问题，因为我是vue3+vie安装的项目，所有用的包管理器也是pnpm，用npm安装的时候安装vue-highcharts可以直接安装vue-highcharts和highcharts两个插件的，但是用pnpm的话只能安装vue-highcharts一个插件，后续引入第三方库是要从highcharts插件中引入的，所以需要自己手动安装highcharts组件。
首先我们要了解highcharts的一些基本常用的几大属性
标题其实不用多说，就是图表的标题没啥很细的东西，文档里面也有
charts里面最重要的是type，它指定了图表的类型是折线图还是曲线图还是柱状图还是饼图,然后可以给图表设置样式，宽高，背景颜色等等,图表样式属性包括border、backgroundColor、margin、spacing、style等,注意这些是同一级别，width，height不写在style里面
label又是比较重要的，有很多属性，enable可以设置true和false（默认true显示），当为false时，x轴和y轴上的刻度文子就不会显示，当为true时可以设置文字的样式用style对象设置，还有rotation属性可以调节坐标刻度上面字体的倾斜度，tickInterval属性可以调整刻度值间隔
min、max、tickInterval可以搭配使用，这三个属性一般用来设置刻度，设置你最小和最大以及每个刻度间隔多少，这样x轴和y轴上的刻度就是平均的了
gridLineWidth、gridLineColor、gridLineDashStyle这三个是设置坐标轴网格线样式的，gridLineDashStyle设置网格线线条样式，和Cssborder-style类似，常用的有：Solid、Dot、Dash。gridLineWidth、gridLineColor分别设置网格线宽度和颜色坐标轴配置示例代码
xAxis:{categories:['今日','本月','本季度','上季度','全年'],title:{text:null},crosshair:true,crosshairs:true//启用竖直方向准星线crosshairs:[true,true]//同时启用竖直及水平准星线crosshairs:[{//设置准星线样式width:3,color:'green'},{width:1,color:"#006cee",dashStyle:'longdashdot',zIndex:100}]labels:{style:{color:'#919191',fontSize:"12px"}}},yAxis:{categories:['0','200','400','600','800','1000'],title:{text:null},labels:{//enabled:false,style:{color:'#919191',fontSize:"12px"}},gridLineDashStyle:'ShortDash',//网格线样式gridLineColor:'rgb(64,64,64)',min:0,//最小值 tickInterval:200,//间隔 max:1000//最大值},tooltip（数据提示框配置）数据提示框指的当鼠标悬停在某点上时，以框的形式提示该点的数据，比如该点的值、数据单位等。数据提示框内提示的信息完全可以通过格式化函数动态指定；通过设置tooltip.enabled=false即可不启用提示框。
数据提示框有以下属性backgroundColor、borderColor、borderRadius、borderWidth、shadow、animation以上分别是设置提示框背景颜色、边框颜色、边框圆角、边框宽度、是否有阴影、是否开启动画，在项目中发现给边框设置宽高没用，还有一个属性padding，我们可以通过改变padding的大小从而改变数据提示框宽高。
还有两个属性也比较重要，pointFormat和headerFormat，可以设置单个点的格式化字符串和数据提示框头部格式化字符，这两个属性也可以直接使用函数pointFormatter实现，对比下pointFormatter和pointFormat我们可以知道两两种方式的差别：
上述两个观点也就是格式化函数和格式化字符串的优缺点，在使用的时候，请灵活运用。我个人喜欢用字符串，字符串里面可以用html模板
当我们在一个图表中特别是柱状图中有可能要显示两个或多个柱子进行对比，这个时候要把两个数据显示在一个提示框中方便对比也更加美观，可以设置shared属性，默认为false，设置为true时，两条数据或多条数据就在以亲显示了，并且我们可以通过pointFormat设置显示的样式。示例代码
图例有以下属性layout、align、verticalAlign这三个分别表示如下，layout表示图例的布局方式，有horizontal（水平）和vertical（垂直）；align表示图例在选择垂直或水平布局之后的对齐方式，有left（左侧对齐）、center（中间对齐）、right（右侧对齐）；verticalAlign表示在设置垂直排列之后，图例整体垂直对齐方式，有top、middle、bottom。图例整体还有很多样式可以配置（一般不需要）如backgroundColor、borderColor、shadow、width等等可以给每一项设置样式用itemStyle，里面有color、cursor，我们一般就给图例设置文字颜色用color示例代码
legend:{enabled:true,layout:'vertical',align:'right',verticalAlign:'middle',symbolHeight:14,symbolWidth:20,symbolRadius:0,itemStyle:{'color':'#FFFFFF'}},plotOptions（数据点配置）plotOption好像有两种写法，一种是写series对象，里面写属性，另一种是，写具体某种图表类型然后写属性，我一般是写第二种，写图表类型里面写属性，属性有dataLabels，dataLabels可以设置数据点，用enable可以控制显示与隐藏、用color设置字体颜色、用style设置字体样式。
此外还有borderRadius、borderColor、groupPadding这三个属性可以设置边框的圆角、边框颜色、每个边框内边距，我们一般用于柱状图的设置，设置borderColor为空的话外边框的白色阴影就会被去掉。示例代码
//图表类型写法plotOptions:{bar:{dataLabels:{enabled:true,//是否在图表上各个数据点显示对应数据color:'rgb(63,149,166)',style:{fontSize:"12px",}},borderRadius:'0',borderColor:'',//去边框groupPadding:0.1},},//series数据列写法series:{marker:{enabled:true//是否显示折线图上的点（折线图配置）},dataLabels:{enabled:false,//是否在图表上各个数据点显示对应数据color:'rgb(63,149,166)',formatter:function(){//格式化returnthis.y;}},borderRadius:'0',borderColor:'',//去边框groupPadding:0.1},series（数据列）数据列是一组数据集合，例如一条线，一组柱形等。图表中所有点的数据都来自数据列对象，数据列的基本构造是：
series:[{name:'',data:[]}]提示：数据列配置是个数组，也就是数据配置可以包含多个数据列。
数据列中的name代表数据列的名字，并且会显示在数据提示框（Tooltip）及图例（Legend）中。在数据列的data属性中，我们可以定义图表的数据数组，通常有三种定义方式（一般都用第三种）：
1、数值数组。在这种情况下，配置数组中的数值代表Y值，X值则根据X轴的配置，要么自动计算，要么从0起自增，或者是根据pointStart及pointInterval自增；在分类轴中，X值就是categoies配置，数值数组配置实例如下：
data:[1,4,6,9,10]2、包含两个值的数组集合。在这种情况下，集合中数组的第一个值代表X，第二个值代表Y；如果第一个值是字符串，则代表该点的名字，并且X值会如1中所说的情况决定。数组集合的实例：
//柱状图和折线图series:[{type:'column',name:'数据一',data:[100,140,200,100,130],color:'rgb(80,135,236)',pointPadding:0.1,groupPadding:0.2,//borderRadiusTopLeft:100,//borderRadiusTopRight:100,},{type:'line',name:'数据二',data:[150,100,230,140,130],color:'rgb(114,205,215)',}]//饼图data:[{name:'数据一',y:40,z:220,color:'rgb(88,148,255)',},{name:'数据二',y:32,z:130,color:'rgb(114,205,215)',},{name:'数据三',y:28,z:100,color:'rgb(88,165,92)',}],其实我们把一些配置写在plotOptions里面的话，这里配置就比较简单了