新公共管理进行高级字符的导入，导入完成后就可以进行高级字符的可视化组件开发了

新公共管理安装高图表-保存

1、组件目录下新建一个chart.vue组件

模板div class=' chart ' id=' myChart ' div class=' emcs _ charts ' : id=' id '/div/div/模板脚本/引入高级图表模块从"高图表"//导入高图表引入这个图表的外部资源数据从导入数据./echart _ data/chart。js ' export default { data(){//将引入的数据写在自己的组件中让dataObj=data.bar返回{ id: 'chart '，dataObj: dataObj } }，已装载(){//钩子函数挂载时实例化这个图表//图表（参数1,参数2);第一个参数挂载组件的容器，第二个参数为图表所需要的数据对象HighCharts.chart(this.id，this.dataObj) }}/scriptstyle作用域lang="手写笔"。图表{向左浮动；背景色# fff填充10px 0；页边距-顶部20px边框半径6px宽度49.5%;emcs_charts{最小宽度890像素高度280px}}/style2、图表组件建好后，开始创建图表-选项目录，里面创建一个chart.js用来存放模拟的图表数据

如下图我写的一个面积图的数据

模块。exports={ bar : { chart : }//图表样式type3360' area '，//指定图表类型，这里是面积图}，//是否启用Labels。X轴和Y轴的默认值都为真。如果要禁用(或不显示)标签，请将此属性设置为false，然后Credits: {Enabled 3360 False}，title:{//指定图表标题text: '设备监控'，align: '左侧'，style:{ color: '#666 '，fontSize:'16px '，}，color :[' rgba(86，199，99，1)'，'4:45 '，' 4:46 '，' 4:47 '，' 4:48 '，' 4:49 '，' 4:50 '，' 43:51 '，' 4:52 '，' 4:53 '，' 4:54 '，' 43:55 '，' 43:56 '，' 433:57 '，' 4333:58 '，'LineColor: ' # dfdfdf '，//坐标轴刻度线颜色： ' # DFD df '，//坐标轴刻度线颜色刻度线长度： 5，///坐标轴刻度线长度网格线宽度33601，//网格线宽度。x轴默认为0，y轴默认为1px。GridLineColor: ' # f2f2f2 '，//网格线颜色。默认值为：#C0C0C0。//gridlinedashstyle:' dash '，//gridline线条样式。

和钢性铸铁边框样式类似，常用的有：实心、圆点、破折号间隔： 5,//刻度间隔' tickmarkPlacement: '介于',//刻度线对齐方式，有在.之间和在可选，默认是介于style: { color: '#999999 '，fontSize:10 }之间，十字线：{//鼠标放上后显示纵轴的数据color:'#999 '，width:1 } }，yAxis: [{//图表的纵坐标，多个轴[{轴一},{轴二}] gridLineWidth: 1，gridLineColor: ' # f2f2f2 '，刻度位置3360[0，25，50，75，100]，//y轴刻度值备忘录：0,标题： {//纵坐标标题text: ' '，margin:0，style: { color: '#999999 '，fontSize:10 } }，labels:{//坐标轴上刻度的样式及单位style: { color: '#999999 '，fontSize:10 }，格式："{ value } % "，//坐标轴上的单位}，offset:-10，//距离坐标轴的距离}，{ gridLineWidth: 1，gridLineColor: ' # f2f2f2 '，tickColor: '#fff '，tickInterval:25，tickLength:0，title: { text: ' '，margin:0，style 33: { color : ' # 9999999999 '，fontSize:10 } }，labels: {设置相反：成立表示该轴位置反转，即为y轴时显示在右侧offset:-10 }]，tooltip: {//数据提示框标题格式： '小{点。key }/small br/'，//标题格式point format : " span style=" color : { series。颜色}；{系列。name }/span:{ point。y } br/'，shared: true，followPointer:true，//跟随鼠标跟随指针移动： rue，//是否跟随手指移动//footperformat at : '子木',//尾部格式化字符串样式：{ fontSize:10，fontFamily: '微软雅黑，fontWeight:'normal '，color:'#666' } }，//标示线总是垂直于它属于的轴。

它可单独定义在x轴或y轴，也可以同时定义在x轴和y轴plot options : { area : {//point start : 1940，marker: { enabled: false，symbol: 'circle '，radius: 2，States : { hover 3: { enabled : true } }，fillOpacity:0.2，lineWidth:1 } }，legend: {//图例居中显示在图表下方align: '中心，symbolRadius:5，//图标圆角符号宽度：10,//图标宽度符号高度：10，//图标高度item style : { color : ' # 999999 '，fontWeight: ' normal '，fontSize:12 }，itemMarginBottom: -14，//图例项底部外边距},系列： [{//数据列是一组数据集合名称： 'CPU '，//名称代表数据列的名字，并且会显示在数据提示框（工具提示)及图例（图例)中data: [ 5，6，10，20，50，45，30，20，10，15，16，17，18，18，30，26，25，24，20，26，36，46，50，51，52，40，30，20，19，18，30，50，55，56，70，72，73，60，55，54，550温度，data:[ 10，11，11，12，12，13，14，15，16，16，16，16，16，16，16，16，16，16，16，16，16，16，16，16，16，16，16，16，16，16，16，16，16，16，16，16，16，16，16，16，16，16，16，16，16，16，16，16，16，16值的前缀、后缀及小数点}，yAxis:1 }] } }3)，父组件引用chart.vue子组件

模板div class=' charts ' id=' my chart ' x-chart/x-chart/div/template script//import chart . vue子组件import XChart from '。/chart . vue ' export default { components 3360 { xchart } }/script style作用域lang='铁笔'/style的效果如下图所示

如果有任何不足，请给我你的建议！希望给大家带来帮助！

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。如果你想了解更多，请查看下面的相关链接